ng-options设置option的value属性

最新推荐文章于 2021-12-28 14:12:03 发布

zhifeng687

最新推荐文章于 2021-12-28 14:12:03 发布

阅读量6.8k

点赞数

分类专栏： angular.js

本文链接：https://blog.csdn.net/qq_26222859/article/details/76022182

版权

angular.js 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

If you use the track by option, the value attribute is correctly written, e.g.:

<div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]">
    <select ng-model="foo" ng-options="x.label for x in a track by x.value"/>
</div>

produces:

<select>
    <option value="" selected="selected"></option>
    <option value="15">one</option>
    <option value="20">two</option>
</select>

摘自：https://stackoverflow.com/questions/13803665/angularjs-value-attribute-for-select

ng-options="p.id as p.title for p in curOptionArray"

ng-options使用as来指定option的value属性为p.id，文本内容为p.title，同时还指定select的ng-model值为选中的p.id

p.id是select提交的值 p.title是select显示的值 p代表数组curOptionArray里面的当前元素

p.id是option标签的value属性，p.title是option标签的文本内容

如果没有使用as来指定select提交的值为p.id，当选中p.title，select的ng-model值为p

使用track by p.id仍然能指定option的value属性为p.id，但没有使用as时选中p.title，select的ng-model值为p

比如上述代码中，如果选择了one，则对应$scope.foo为对象{label: 'one', value: 15}，

虽然html上<option value="15">one</option>的value属性为15

如果使用ng-options="x.value as x.label for x in a"

当选择one时，则$scope.foo为15

可参考官网：
https://docs.angularjs.org/api/ng/directive/ngOptions#!

更常用更普遍的做法是用as

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <script src="angular.min.js"></script>  
</head>  
<body>  
<div ng-app="hd" ng-controller="ctrl">  
    <select ng-options="v.value as v.name for v in data" ng-model="city">  
        <option value="">请选择城市</option>  
    </select>  
    {{city}}  
</div>  
<script>  
    var m = angular.module('hd', []);  
    m.controller('ctrl', ['$scope', function ($scope) {  
        $scope.city = 'beijing';  
        $scope.data = [  
            {name: '广东', value: 'guangdong'},  
            {name: '北京', value: 'beijing'},  
            {name: '南京', value: 'nanjing'},  
        ];  
    }]);  
</script>  
</body>  
</html>

其中v.value的值被绑定在option的value属性里面，v.name则赋值给了option标签里的内容

ng-options用法详解

原文地址：http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/ng-options-usage/

ng-options属性可以在表达式中使用数组或对象来自动生成一个select中的option列表。ng-options与ng-repeat很相似，很多时候可以用ng-repeat来代替ng-options。但是ng-options提供了一些好处，例如减少内存提高速度，以及提供选择框的选项来让用户选择。当select中一个选项被选择，该选项将会被绑定到ng-model。如果你想设一个默认值，可以像这样：$scope.selected = $scope.collection[3]。

之前一直在用ng-repeat就见到过track by，没有去了解它的用法，这次了解了一下。track by主要是防止值有重复，angularjs会报错。因为angularjs需要一个唯一值来与生成的dom绑定，以方便追踪数据。例如：items=[“a”,“a”,“b”],这样ng-repeat=“item in items”就会出错，而用ng-repeat=“(key,value) in items track by key”就不会出现错误了。

ng-options一般有以下用法：

对于数组：

label for value in array
select as label for value in array
label group by group for value in array
label disable when disable for value in array
label group by group for value in array track by trackexpr
label disable when disable for value in array track by trackexpr
label for value in array | orderBy:orderexpr track by trackexpr(for including a filter with track by)
对于对象：

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

一个简单的例子：

<script>
angular.module('selectExample', [])
  .controller('ExampleController', ['$scope', function($scope) {
    $scope.colors = [
      {name:'black', shade:'dark'},
      {name:'white', shade:'light', notAnOption: true},
      {name:'red', shade:'dark'},
      {name:'blue', shade:'dark', notAnOption: true},
      {name:'yellow', shade:'light', notAnOption: false}
    ];
    $scope.myColor = $scope.colors[2]; // red
  }]);
</script>
<div ng-controller="ExampleController">
  <ul>
    <li ng-repeat="color in colors">
      <label>Name: <input ng-model="color.name"></label>
      <label><input type="checkbox" ng-model="color.notAnOption"> Disabled?</label>
      <button ng-click="colors.splice($index, 1)" aria-label="Remove">X</button>
    </li>
    <li>
      <button ng-click="colors.push({})">add</button>
    </li>
  </ul>
  <hr/>
  <label>Color (null not allowed):
    <select ng-model="myColor" ng-options="color.name for color in colors"></select>
  </label><br/>
  <label>Color (null allowed):
  <span  class="nullable">
    <select ng-model="myColor" ng-options="color.name for color in colors">
      <option value="">-- choose color --</option>
    </select>
  </span></label><br/>
 
  <label>Color grouped by shade:
    <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors">
    </select>
  </label><br/>
 
  <label>Color grouped by shade, with some disabled:
    <select ng-model="myColor"
          ng-options="color.name group by color.shade disable when color.notAnOption for color in colors">
    </select>
  </label><br/>
 
  Select <button ng-click="myColor = { name:'not in list', shade: 'other' }">bogus</button>.
  <br/>
  <hr/>
  Currently selected: {{ {selected_color:myColor} }}
  <div style="border:solid 1px black; height:20px"
       ng-style="{'background-color':myColor.name}">
  </div>
</div>

zhifeng687

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
2
评论
ng-options设置option的value属性

If you use the track by option, the value attribute is correctly written, e.g.:&lt;div ng-init="a = [{label: 'one', value: 15}, {label: 'two', value: 20}]"&gt; &lt;select ng-model="foo" ng-options...
复制链接

扫一扫

专栏目录