码迷,mamicode.com
首页 > 其他好文 > 详细

angular select中ng-options使用

时间:2017-01-08 22:31:13      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:log   sel   cti   pre   cat   属性   name   group by   scope   

function selectCtrl($scope) {
    $scope.selected = ‘‘;

    $scope.model = [{
        id: 10001,
        mainCategory: ‘男‘,
        productName: ‘水洗T恤‘,
        productColor: ‘白‘
    }, {
        id: 10002,
        mainCategory: ‘女‘,
        productName: ‘圆领短袖‘,
        productColor: ‘黑‘
    }, {
        id: 10003,
        mainCategory: ‘女‘,
        productName: ‘短袖短袖‘,
        productColor: ‘黃‘
    }];

<select ng-model="selected" ng-options="m.productName for m in model">
    <option value="">-- 请选择 --</option>
</select>

从这两段代码就能看出结果了,ng-options的值就可以当做英文意思来理解。m.productName属性来自m in model遍历。按照这种思路下面列出不同使用格式↓

<select ng-model="selected" ng-options="(m.productColor + ‘ - ‘ + m.productName) for m in model">
    <option value="">-- 请选择 --</option>
</select>

遍历出两个属性值。

<select ng-model="selected" ng-options="(m.productColor + ‘ - ‘ + m.productName) group by m.mainCategory for m in model">
    <option value="">-- 请选择 --</option>
</select>

通过遍历,进行分组显示。

<select ng-model="selected" ng-options="m.id as m.productName for m in model">
    <option value="">-- 请选择 --</option>
</select>

这个比较难理解点,意思是通过遍历得到id,也就是界面显示的是m.productName值但是选中后输入框绑定到ng-model=”selsected”的值是m.id。

以后总会用到的!!

 

angular select中ng-options使用

标签:log   sel   cti   pre   cat   属性   name   group by   scope   

原文地址:http://www.cnblogs.com/xfdmb/p/6262808.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!