您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

使用AngularJS的ng-options进行选择

使用AngularJS的ng-options进行选择

要注意的一件事是ngOptions起作用 需要 ngModel。请注意,ng-model="blah"这是“将$ scope.blah设置为所选值”。

尝试这个:

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

这里是AngularJS文档的更多内容(如果您还没有看过的话):

对于数组数据源:

对于对象数据源:

对于AngularJS中的选项标签值的一些澄清:

使用时ng-options, 。这是因为AngularJS实际上允许您使用选择控件来选择整个对象,而不仅仅是原始类型。例如:

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直接选择整个对象。

处理认选项:

上面我没有提到与认选项有关的几件事。

您可以通过添加一个简单ng-init的模型来实现此目的,该模型将模型(fromng-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碰巧正确初始化为“fassy”,这可能会有点疯狂。在这种情况下,您foo很可能希望在控制器中处理的初始化。

这有点不同。在这里,您所需要做的就是添加一个选择标签作为您选择的子标签,并带有一个空值属性,然后自定义其内部文本:

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

注意:在这种情况下,即使您选择其他选项,“空”选项也将保留在那里。AngularJS下selects的认行为不是这种情况。

如果希望在选择一个值后取消自定义认选项,则可以在认选项中添加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>
其他 2022/1/1 18:15:45 有458人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶