栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

使用AngularJS的ng-options进行选择

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用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文档的更多内容(如果您还没有看过的话):

对于数组数据源:

  • 数组中值的标签
  • 选择作为数组中值的标签
  • 标签为数组中的值按组分组=选择标签为数组中的值按组分组

对于对象数据源:

  • 对象中(key,value)的标签
  • 选择作为对象中(key,value)的标签
  • 为对象中的(键,值)分组标签
  • 为对象中的(键,值)按组选择作为标签

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

使用时

ng-options
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
直接选择整个对象。 关键是,使用AngularJS,您无需担心选项标签中的内容。
让AngularJS处理;您应该只关心范围中模型的内容。


处理默认选项:

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

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

您可以通过添加一个简单

ng-init
的模型来实现此目的,该模型将模型(from
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
碰巧正确初始化为“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>


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/415988.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号