首页 > Web开发 > 详细

Angularjs select总结

时间:2016-01-25 13:05:35      阅读:272      评论: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
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!