AngularJs ng-options

前端之家收集整理的这篇文章主要介绍了AngularJs ng-options前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. select标签中的ng-model 使用时注意,选择的结果

  1. <form class="form-horizontal container" ng-app="myApp" ng-controller="validateCtrl"
  2. name="myForm" novalidate>
  3. <div class="form-group">
  4. <label class="control-label">地区:</label>
  5. <!--如果不指定x.id,ng-model选择的结果是object对象-->
  6. <select ng-model="areaID" ng-options="x.name for x in items"></select>
  7. <span class="text-danger" ng-show="myForm.areaID.$dirty && myForm.areaID.$invalid">
  8. <span ng-show="myForm.areaID.$error.required">地区是必须的</span>
  9. </span>
  10. </div>
  11. </form>
  12.  
  1. var app = angular.module('myApp',[]);
  2. app.controller('validateCtrl',function ($scope,$timeout) {
  3. $scope.items = [
  4. { id: 1,name: '山东' },{ id: 2,name: '山西' }
  5. ];
  6. $scope.areaID = 1;
  7. $scope.$watch('areaID',function (newValue) {
  8. console.info(newValue);
  9. });
  10. });

选择的结果是:object


  1. <div class="form-group">
  2. <label class="control-label">地区:</label>
  3. <!-- x.id as x.name 用来指定选择结果为ID,显示的是name -->
  4. <select ng-model="areaID" ng-options="x.id as x.name for x in items"></select>
  5. <span class="text-danger" ng-show="myForm.areaID.$dirty && myForm.areaID.$invalid">
  6. <span ng-show="myForm.areaID.$error.required">地区是必须的</span>
  7. </span>
  8. </div>
选择的结果是ID


2.使用group by分组显示

  1. <form class="form-horizontal container" ng-app="myApp" ng-controller="validateCtrl"
  2. name="myForm" novalidate>
  3. <div class="form-group">
  4. <label class="control-label">动物:</label>
  5. <!--使用group by 可以分组显示-->
  6. <select ng-model="AniID" ng-options="x.id as x.name group by x.sex for x in animals"></select>
  7. </div>
  8. </form>
  1. var app = angular.module('myApp',$timeout) {
  2. $scope.animals = [
  3. {
  4. id: '00001',name: '猫',sex: '雌',food: '鱼',favor: '玩球'
  5. },{
  6. id: '00002',name: '狗',sex: '雄',food: '骨头',favor: '接盘子'
  7. },{
  8. id: '00003',name: '兔',food: '胡萝卜',favor: '刨洞'
  9. },{
  10. id: '00004',name: '狮',food: '肉',favor: '猎物'
  11. }
  12. ];
  13. $scope.AniID = '00004';
  14. $scope.$watch('AniID',function (newValue) {
  15. console.info(newValue);
  16. });
  17. });

猜你在找的Angularjs相关文章