有哪些 Angular 方法可以从 <select> 的数据中动态生成需要值和文本的 <option> 元素？

Question

我想使用angular表达式生成一个选项列表来实现

<select id="sel">
    <option value="1">value1</option>
    <option value="2">value2</option>
    <option value="3">value3</option>
</select>

在选择时它将return一个对象或一个简单的值。

我有来自服务器的数据类似于这个

["string1", "string2", "string3"]

有时这个

[
   {val: '01', Text: 'struct1'},
   {val: '02', Text: 'struct2'},
   {val: '03', Text: 'struct3'}
]

有时

[
   {id: '01', obj: {grp: 'A', Text: 'struct1'}},
   {id: '02', obj: {grp: 'A', Text: 'struct2'}},
   {id: '03', obj: {grp: 'A', Text: 'struct3'}}
];

Answer 1

为了用一行代码完成从数据对象到select可用对象（选项）列表的平滑转换，我们需要了解angularJS如何构造它们的模板！！这是==>

XXX as YYY for ZZZ in ZZZZ

XXX 是您从选项中选择的最终值
YYY 是你的价值文本
ZZZ 是您的 ZZZZ 项目中的一项

从上面你可以得到用户点击 selection 的各种结果。整个代码就是这样

HTML==>

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<pre>itm for itm in stringArray : Result==> {{L1}}</pre>
<select ng-model="L1" ng-options="itm for itm in stringArray">
<option value="">the strings</option>
</select>
<hr/>

<pre>itm as itm.Text for itm in structArray : Result==> {{L2}}</pre>
<select ng-model="L2" ng-options="itm as itm.Text for itm in structArray">
<option value="">the structs</option>
</select>
<hr/>

<pre>itm.val as itm.Text for itm in structArray : Result==> {{L3}}</pre>
<select ng-model="L3" ng-options="itm.val as itm.Text for itm in structArray">
<option value="">the structs</option>
</select>
<hr/>

<pre>itm as itm.Text for itm in structArray track by itm.val : Result==> {{L4 | json}} </pre>
<select ng-model="L4" ng-options="itm as itm.Text for itm in structArray track by itm.val">
<option value="">the structs</option>
</select>
<hr/>

</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
    $scope.stringArray = ["string1", "string2", "string3"];
    $scope.structArray = 
    [
       {val: '01', Text: 'struct1'},
       {val: '02', Text: 'struct2'},
       {val: '03', Text: 'struct3'},
    ];
  
});
</script>
</body>
</html>

请注意，在从 in-line 模板语句部署对象后，我还在选项列表中插入了一个空白选项！

请注意，您可以从 select 更改事件中 return json 对象。这意味着，您可以期待用户从 select 列表中的一个选项中选择一个非常强大的对象！

有哪些 Angular 方法可以从 <select> 的数据中动态生成需要值和文本的 <option> 元素？

What are the Angular ways to generate <option> elements that requires value and text dynamically from data for <select>?

angularjs

ng-options

angularjs-ng-options