问题
In my code behind, I fill up a DropDownList as follows (using VB)
ddlCountries.DataSource = dt ' dt is DataTable with columns "CountryCode" and "CountryName"
ddlCountries.DataTextField = "CountryName"
ddlCountries.DataValueField = "CountryCode"
ddlCountries.DataBind()
ddlCountries.Attributes.Add("ng-model", "CountryName")
Then client side, I have a select tag, which is filled with options from server side as below:
<select ng-model="CountryName">
<option value="IN">India</option>
<option value="US">United States</option>
<option value="ML">Malaysia</option>
<!-- and other 200+ records -->
</select>
I can't use ng-options
here! Now, whenever I change the value from select
, I get CountryName
as IN
, US
, ML
etc.. Moreover, I can't edit values of options because they're used in server side code.
Here I want CountryName
as India
, United States
or Malaysia
instead! What can I do?
回答1:
What data is the server sending you?
Is it some array of objects like this?
var countries = [
{ name: 'India', code: 'IN'},
{ name: 'United States', code: 'US'},
{ name: 'Malaysia', code: 'ML'}
];
If yes, then you can easily use ng-options (even though you dont have to, its just better).
<select ng-model="CountryName"
ng-options="c.code as c.name for c in countries">
</select>
Or in the case that you actually are working with server side generated html page and no javascript objects, then its a little bit tricker: (Supposing you can use JQuery):
view:
<select id="countryNameSelect" ng-change="setCountryName()">
<option value="IN">India</option>
<option value="US">United States</option>
<option value="ML">Malaysia</option>
<!-- and other 200+ records -->
</select>
controller:
$scope.countryName = '';
$scope.setCountryName = function() {
$scope.countryName = $("#countryNameSelect option:selected").html();
};
回答2:
In PHP BackEnd array to Json Out: < ? php echo json_encode($arrayDemo); ? >
// Init Load
$(function () {
'use strict';
angular
.module('ngjsapp', [])
.controller('FormCtrl', ['$scope', function ($scope) {
var myArraySelect = <?php echo json_encode($arrayDemo); ?>
$scope.changeSenasaProvinciasId = function (id) {
console.log(myArraySelect[id]);
}
}]);
});
Only HTML Stact + jQuery
// Option 1
$(function () {
'use strict';
angular
.module('ngjsapp', [])
.controller('FormCtrl', ['$scope', function ($scope) {
$scope.changeSenasaProvinciasId = function () {
console.log($("#mySelectID option:selected").text());
}
}]);
});
Only HTML Stact + jQuery BEST
// Option 2
$(function () {
'use strict';
angular
.module('ngjsapp', [])
.controller('FormCtrl', ['$scope', function ($scope) {
var myArraySelect = $('#mySelectID option').each( function() {
myArraySelect.push({$(this).val() : $(this).text() });
});
$scope.changeSenasaProvinciasId = function (id) {
console.log(myArraySelect[id]);
}
}]);
});
来源:https://stackoverflow.com/questions/27426539/angular-js-get-selected-text-as-ng-model-without-ng-options