select array 数据:

  

select ng-model 用法:

  1.可以是一个对象形式,ng-model="test"          $scope.test = {name: "admin1", id: 1, data: [12], type: "open"};

  2.可以是一个string或者number,ng-model="test.id"    $scope.test = {name: "admin1", id: 1, data: [12], type: "open"};

select ng-change 用法:

  

  ng-change="getDateTest(test)"  

    $scope.getDateTest = function (item) {

      console.log(item);  
    };

  本来是想把item直接当作参数传给getDateTest,但是试过之后发现不行,拿到的是undefined,不能像ng-repeat循环出来的那样做。

select ng-options 用法:

  1.item.name for item in array

    基本用法,array是一个数组列表,item是数组中的一项,json形式,name是json中的一项。

    可以看到循环出来的label就是item.name,但是value值应该是随机搞出来的,这里没指定的情况下,我也不太清楚value是按照啥来的-_-

    

    

  2.item.id as item.name for item in array

    item.id 会和 test.id 进行对比,如果一样,会默认选到这一项option;当选择某一项option时会把当前的id赋值给test.id。

    这种情况下,label是item.name,value就是item.id。

    

    

  3.item.name for item in array track by item.id

    这种情况是在基本配置下多了一个track by,是用来指定索引项,在这里value就是item.id。

    选择某一项option时,test会被赋值为当前的option,也就是当前的一项item,所以这时候就可以在ng-change时把test传回去,解决了上面无法传入item的问题。

    

    

  4.item.name group by item.type for item in array

    这种用法可以分组,依据item.type分成了两组数据。

    

    

    

  5.对象的用法:

    

    1).key for (key, value) in object

      需要注意的是这里的test会被赋值成value的值。

      

      

    2).key as key for (key, value) in object

      这种情况和上面唯一的区别是test会被赋值成key的值。

      

    3).key group by value for (key, value) in object

      这种情况下会按照value分组。

      

      

      

select 小结:

  在使用angular过程中,会经常与列表的循环打交道,用的比较多的是ng-repeat,那个很好用。但是最近用到了select,就了解了一下,发现ng-options也是很有趣,也蛮多用法的,就简单总结了一下,希望以后再用到什么新功能再来补充吧-_-

最新文章

  1. webstorm 更改默认服务器端口
  2. redis的安装及使用
  3. GIT学习
  4. [Linux] mail 命令,进入邮箱及删除邮件
  5. less2
  6. POJ 1182 食物链(种类并查集)
  7. Css_2跟3
  8. Python之路-(三级菜单)
  9. Android开发——实现固定在ScrollView顶部的View,类似于新浪微博的评论列表的顶部
  10. 最严格的身份证校验(JavaScript版)
  11. Delphi default属性
  12. CodeForces 598E Chocolate Bar
  13. springmvc流程图
  14. vue文件上传控件
  15. Python 中文数字转阿拉伯数字
  16. JavaScript的内置对象(Math对象)
  17. IDEA如何把写好的java文件/项目打包成一个jar的文件
  18. padding-top和margin-top的区别
  19. 使用Markdown语法画流程图
  20. 解决Tomcat出现内存溢出的问题

热门文章

  1. robotframework连接mysql
  2. python基础语法15 面向对象2 继承,多态,继承json模块中JSONEncoder,并派生出新的功能
  3. python 操作目录
  4. JDOJ 2197: 校门外的树
  5. 排序算法-归并排序(Java)
  6. Scrapy笔记09- 部署
  7. 讲题专用——线段树——优化DP
  8. SpringBoot之邮件服务
  9. 出现:Microsoft Visual C++ 14.0 is required 的解决方案
  10. Java 集合系列之六:工具类Collections和Arrays基本操作