Angularjs select总结

Posted 2020-06-08

定义列表和选中项

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