ng-options中的键值对

我需要使用关联数组作为使用AngularJS的select选项的数据源。

是否有可能使用这样的数组?

{ "key1": "val1", "key2": "val2", "key3": "val3", ... } 

并得到这样的东西:

 <select> <option value="key1">val1</option> <option value="key2">val2</option> <option value="key3">val3</option> ... </select> 

我阅读文档 ,但我不明白如何实现这一点。

3 Solutions collect form web for “ng-options中的键值对”

使用ng-option

 <select ng-model="blah" ng-options="key as value for (key , value) in data"></select> 

或者使用ng-repeat

 <select> <option ng-repeat="(key, value) in data" value="{{key}}">{{value}}</option> </select> 

控制器中的数据:

 $scope.data = { "key1": "val1", "key2": "val2", "key3": "val3", ... }; 

下面的文章讨论了你可以使用ngOptions的各种方法(迄今为止我见过的最清晰,最彻底的解释): http : //www.undefinednull.com/2014/08/11/a-brief-walk -通过的最-NG选项function于angularjs /

Lin-Tsu Lin回答实际上提供了访问对象的两种方式。 只是想添加更多的行 –

因为ng-repeat指令为数组中的每个项目重复一段HTML代码,所以它可以用来在下拉列表中创build选项,但是ng-options指令特别用于填充选项的下拉列表,并且在至less一个重要的优点:

使用ng-options进行的下拉菜单允许选定的值为一个对象,而由ng-repeat下拉菜单必须是一个string。

为参考添加一个示例:

ng-repeat : http : //www.w3schools.com/angular/tryit.asp? ng-repeat = try_ng_select_repeat_selected

ng-options : http : //www.w3schools.com/angular/tryit.asp? ng-options =try_ng_select_object

有关完整的参考资料,请前往http://www.w3schools.com/angular/angular_select.asp

  • 如何实现与多个参数和afterDelay performSelector?
  • 在n个项目的数组中findk个最小数字的algorithm
  • javascript:在切换情况下使用条件
  • 如何通过使用ID的variablesselectjQuery中的元素?
  • 从今天selectlogging,本周,本月php mysql
  • 如何更改UITableViewCell的蓝色高亮颜色?
  • 我如何获得包含当前select的DOM元素?
  • MySQL浮点比较问题
  • 如何从IGrouping获取值
  • MySQL只select非空值
  • 用SELECT进行INSERT