javascript Angular JS - 将所选文本作为 ng 模型（不带 ng 选项）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27426539/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular JS - get selected text as ng model (without ng-options)
提问by Ruchir Gupta
In my code behind, I fill up a DropDownList as follows (using VB)
在我后面的代码中，我填写了一个 DropDownList 如下（使用 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 标签，其中填充了来自服务器端的选项，如下所示：
<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-optionshere! Now, whenever I change the value from select, I get CountryNameas IN, US, MLetc.. Moreover, I can't edit values of options because they're used in server side code.
我ng-options这里不能用！现在，每当我从更改值select，我得到CountryName的IN，US，ML等。此外，我不能因为他们在服务器端代码中使用的选项编辑值。
Here I want CountryNameas India, United Statesor Malaysiainstead! What can I do?
这里我想要CountryNameas India，United States或者Malaysia相反！我能做什么？
回答by Joe Samanek
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).
如果是，那么您可以轻松使用 ng-options（即使您不必这样做，它也更好）。
<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):
或者，如果您实际上正在使用服务器端生成的 html 页面并且没有 javascript 对象，那么它有点诡异：（假设您可以使用 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();
};
回答by Sergio
In PHP BackEnd array to Json Out: < ? php echo json_encode($arrayDemo); ? >
在 PHP 后端数组到 Json 输出： < ? 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
只有 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
只有 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]);
}
}]);
});
