Angular的ng选项 使用选择器

前端之家收集整理的这篇文章主要介绍了Angular的ng选项 使用选择器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我已经阅读了在其他职位,但不能弄清楚。
我有数组:
$scope.items = [
   {ID: '000001',Title: 'Chicago'},{ID: '000002',Title: 'New York'},{ID: '000003',Title: 'Washington'},];

我想渲染这个

<select>
  <option value="000001">Chicago</option>
  <option value="000002">New York</option>
  <option value="000003">Washington</option>
</select>

我也想选择ID = 000002的选项。

我已经阅读这个http://docs.angularjs.org/api/ng.directive:select和尝试,但不能弄清楚。

需要注意的一点是,ngModel是ngOptions工作所必需的…注意ng-model =“blah”这是说“将$ scope.blah设置为选定的值”。

尝试这个:

<select ng-model="blah" ng-options="item.ID as item.Title for item in items"></select>

这里更多从Angular的文档(如果你还没有看到它):

for array data sources:

  • label for value in array
  • select as label for value in array
  • label group by group for value in array
    = select as label group by group for value in array

for object data sources:

  • label for (key,value) in object
  • select as label for (key,value) in object
  • label group by group for (key,value) in object
  • select as label group by group for (key,value) in object

编辑:对于Angular中的选项标签值的一些澄清

当使用ng-options时,由ng-options写出的选项标签的值将始终是选项标签涉及的数组项的索引。这是因为Angular实际上允许您使用选择控件选择整个对象,而不仅仅是基本类型。例如:

app.controller('MainCtrl',function($scope) {
   $scope.items = [
     { id: 1,name: 'foo' },{ id: 2,name: 'bar' },{ id: 3,name: 'blah' }
   ];
});
<div ng-controller="MainCtrl">
   <select ng-model="selectedItem" ng-options="item as item.name for item in items"></select>
   <pre>{{selectedItem | json}}</pre>
</div>

上面将允许你直接选择一个整个对象到$ scope.selectedItem。关键是,使用Angular,你不需要担心你的选项标签中有什么。让Angular句柄,你应该只关心你的模型在你的范围。

Here is a plunker demonstrating the behavior above,and showing the html written out

编辑2:处理默认选项:

有一些我上面没有提到的与默认选项有关的东西。

选择第一个选项并删除空选项:

您可以通过添加一个简单的ng-init来设置模型(从ng-model)到您在ng-options中重复的项目的第一个元素:

<select ng-init="foo = foo || items[0]" ng-model="foo" ng-options="item as item.name for item in items"></select>

注意:如果foo碰巧被正确初始化为“falsy”,这可能会有点疯狂。在这种情况下,您将需要在控制器中处理foo的初始化,最有可能。

自定义默认选项:

这有点不同,这里所有你需要做的是添加一个选项标签作为你的选择的子元素,具有一个空的值属性,然后自定义它的内部文本:

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="">Nothing selected</option>
</select>

注意:在这种情况下,“空”选项将保持在那里,即使选择了一个不同的选项。这不是在Angular下的选择的默认行为的情况。

进行选择后隐藏的自定义默认选项:

如果希望在选择值之后您的自定义默认选项消失,可以将ng-hide属性添加到默认选项中:

<select ng-model="foo" ng-options="item as item.name for item in items">
   <option value="" ng-if="foo">Select something to remove me.</option>
</select>
原文链接:https://www.f2er.com/angularjs/147523.html

猜你在找的Angularjs相关文章