Angularjs select总结

最新推荐文章于 2021-09-22 11:37:50 发布

转载最新推荐文章于 2021-09-22 11:37:50 发布 · 59 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sssleon/p/5151856.html

本文详细介绍了如何在HTML5中通过AngularJS定义列表和选择项，包括不同方法的使用和展示。

定义列表和选中项

$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>

转载于:https://www.cnblogs.com/sssleon/p/5151856.html