【问题标题】:AngularJS - ngRepeat usageAngularJS - ngRepeat 用法
【发布时间】:2013-05-29 04:54:56
【问题描述】:

我有一个项目列表,每个项目都有自己的 item.value 和 item.name。我想生成如下 HTML 代码:

<option value="{{item.value}}">{{item.name}}</option>

如何在 AngularJS 中做到这一点?非常感谢。

更新:我忘记提及我拥有的列表是一个对象,因为我想关联 Id 以将其用作索引,例如:

$scope.list={
    0:{value:0,name:"name0"},
    5:{value:5,name:"name5"}
}

【问题讨论】:

标签: angularjs


【解决方案1】:
function Ctrl($scope) {  
  $scope.list={
      0:{value:0,name:"name0"},
      5:{value:5,name:"name5"}
  }
}

伴随:

<select>
  <option ng-repeat="item in list" value="{{item.value}}">{{item.name}}</option>
</select>

工作:http://plnkr.co/edit/7ueudpXuGwmQt627fZGE?p=preview

【讨论】:

  • 我的列表是一个对象,抱歉没有提到:$scope.list={ 0:{value:0,name:"asdf"}, 1:{value:1,name:"bsdf"} }
  • 也适用于:plnkr.co/edit/7ueudpXuGwmQt627fZGE?p=preview,因为 for 会遍历每个关键属性。不管是列表还是 obj。
  • 啊,键名中有错字,因此 obj.key 返回未定义,因此 Angular 将表达式评估为空字符串。非常感谢。
【解决方案2】:

在您的对象模型中使用 ng-options:

<select ng-options="v.value as v.name for (k,v) in list" ng-model="selected">
  <option value="">select a value</option>
</select>
<div>{{selected}}</div>

你的模特:

function Ctrl($scope) {  
    $scope.list={
      0:{value:0,name:"name0"},
      5:{value:5,name:"name5"}
  }
}

工作示例:http://plnkr.co/edit/uNJXlCObZdhT96YDje5p?p=preview

【讨论】:

  • 老实说,这是更好的版本。
  • @ŁukaszNiemier 我同意。我不知道如何在其他版本中被选中。这是我在这个版本中强调的:)
猜你喜欢
  • 1970-01-01
  • 2013-08-17
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-05-13
  • 1970-01-01
  • 2014-07-10
相关资源
最近更新 更多