码迷,mamicode.com
首页 > Web开发 > 详细

Angularjs select总结

时间:2016-01-25 13:06:58      阅读:112      评论:0      收藏:0      [点我收藏+]

标签:

定义列表和选中项

$scope.Current = "Writing code"//定义选中项
$scope.TotalItems =[//定义列表
      { id: 1, type: "Work", name: "Writing code" },
      { id: 2, type: "Work", name: "Testing code" },
      { id: 3, type: "Work", name: "Fixing bugs" },
      { id: 4, type: "Play", name: "Dancing" }
   ];

使用方法:

方法1:
<select class="form-control" ng-model="Current">//只使用其中一列,循环列表
    <option value="">-- 请选择 --</option> <option ng-repeat="item in TotalItems ">{{item.name}}</option>
</select>

 

方法2://拼接字符项
<select class="form-control" ng-model="Current" ng-options="( item.name + ‘_‘ + item.id ) for itemin TotalItems">
    <option value="">-- 请选择 --</option>
</select>

 

方法3://与方法1基本相同
<select class="form-control" ng-model="Current" ng-options="item.name for item in TotalItems">
    <option value="">-- 请选择 --</option>
</select>

 

方法4://key为id,显示为name,key只能为数字
<select class="form-control" ng-model="Current" ng-options="item.id as item.name for item in TotalItems">
    <option value="">-- 请选择 --</option>
</select>

 

方法5://实现分组查询
<select class="form-control" ng-model="Current" ng-options="item.id as item.name group by item.type for item in TotalItems">
    <option value="">-- 请选择 --</option>
</select>

 

Angularjs select总结

标签:

原文地址:http://www.cnblogs.com/sssleon/p/5151856.html

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