AngularJs ng-options
2016-07-19 17:42
507 查看
1. select标签中的ng-model 使用时注意,选择的结果
选择的结果是:object
2.使用group by分组显示
3.在Mvc中后台输出ng-options数据内容如下:
<select class="form-control" name="PageType" ng-model="entity.PageType"
ng-options='x.Key as x.Value for x in @Html.Raw(Enums.GetList<Enums.PageType>().ToList().ToJson())'></select>运行结果如下:
注意,此处内容外部使用单引号包裹,也就是ng-options='xxx'
更多:
AngularJs select绑定数字类型问题
AngularJS阻止事件冒泡$event.stopPropagation()
AngularJs checkbox绑定
AngularJS动画(一)
<form class="form-horizontal container" ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <div class="form-group"> <label class="control-label">地区:</label> <!--如果不指定x.id, ng-model选择的结果是object对象--> <select ng-model="areaID" ng-options="x.name for x in items"></select> <span class="text-danger" ng-show="myForm.areaID.$dirty && myForm.areaID.$invalid"> <span ng-show="myForm.areaID.$error.required">地区是必须的</span> </span> </div> </form>
var app = angular.module('myApp', []); app.controller('validateCtrl', function ($scope, $timeout) { $scope.items = [ { id: 1, name: '山东' }, { id: 2, name: '山西' } ]; $scope.areaID = 1; $scope.$watch('areaID', function (newValue) { console.info(newValue); }); });
选择的结果是:object
<div class="form-group"> <label class="control-label">地区:</label> <!-- x.id as x.name 用来指定选择结果为ID,显示的是name --> <select ng-model="areaID" ng-options="x.id as x.name for x in items"></select> <span class="text-danger" ng-show="myForm.areaID.$dirty && myForm.areaID.$invalid"> <span ng-show="myForm.areaID.$error.required">地区是必须的</span> </span> </div>选择的结果是ID
2.使用group by分组显示
<form class="form-horizontal container" ng-app="myApp" ng-controller="validateCtrl" name="myForm" novalidate> <div class="form-group"> <label class="control-label">动物:</label> <!--使用group by 可以分组显示--> <select ng-model="AniID" ng-options="x.id as x.name group by x.sex for x in animals"></select> </div> </form>
var app = angular.module('myApp', []); app.controller('validateCtrl', function ($scope, $timeout) { $scope.animals = [ { id: '00001', name: '猫', sex: '雌', food: '鱼', favor: '玩球' }, { id: '00002', name: '狗', sex: '雄', food: '骨头', favor: '接盘子' }, { id: '00003', name: '兔', sex: '雌', food: '胡萝卜', favor: '刨洞' }, { id: '00004', name: '狮', sex: '雄', food: '肉', favor: '猎物' } ]; $scope.AniID = '00004'; $scope.$watch('AniID', function (newValue) { console.info(newValue); }); });
3.在Mvc中后台输出ng-options数据内容如下:
<select class="form-control" name="PageType" ng-model="entity.PageType"
ng-options='x.Key as x.Value for x in @Html.Raw(Enums.GetList<Enums.PageType>().ToList().ToJson())'></select>运行结果如下:
注意,此处内容外部使用单引号包裹,也就是ng-options='xxx'
更多:
AngularJs select绑定数字类型问题
AngularJS阻止事件冒泡$event.stopPropagation()
AngularJs checkbox绑定
AngularJS动画(一)
相关文章推荐
- angular 学习之路(一)学生信息管理
- localStorage的高级操作写法
- AngularJS 跨域
- angular.element的常用方法
- Angular知识总结及学习资料(中文版)
- AngularJS注入依赖路由总结
- 第七次迭代开发总结(AngularJS下文件上传的实现)
- AngularJS:在ng-click中使用Filter。
- AngularJS 服务(Service)
- 同源及跨域问题解决
- Component 与 Directive定义的区别
- AngularJs初步学习笔记(part1)
- NG核心概念有哪些?
- 《AngularJS》------自定义服务 provider、service、factory
- AngularJs 基础教程 (一) 我的第一个angularjs程序
- AngularJs 基础教程 (二) 数据的绑定与表达式
- 【angular之起步】安装
- angular的watch监听
- angular的脏检查
- angular的作用域