在 AngularJS 中,ng-options 指令用于在 <select> 元素中动态生成选项。它允许你绑定一个数组或对象到 <select> 元素,以便用户可以从下拉菜单中选择一个选项。

以下是一个简单的例子:
<div ng-controller="myController">
  <select ng-model="selectedItem" ng-options="item as item.label for item in items">
    <option value="">Select an item</option>
  </select>
  <p>You selected: {{ selectedItem.label }}</p>
</div>

在这个例子中,ng-model 用于双向绑定选择框的值,ng-options 用于定义选项。在 ng-options 中,item as item.label for item in items 表示使用数组 items 中每个元素的 label 属性作为选项显示的文本,并将整个元素作为选项的值。

在控制器中,你需要定义一个数组 items,供选择框使用:
app.controller('myController', function($scope) {
  $scope.items = [
    { label: 'Option 1', value: 1 },
    { label: 'Option 2', value: 2 },
    { label: 'Option 3', value: 3 }
  ];
});

用户选择一个选项后,selectedItem 中将存储所选选项的值。在页面中,可以通过 {{ selectedItem.label }} 显示用户选择的文本。

这只是一个简单的例子,你可以根据实际需求更改和扩展。在 AngularJS 中,ng-options 提供了强大的灵活性,可以适应各种场景的选择框需求。


转载请注明出处:http://www.pingtaimeng.com/article/detail/4862/Angular