AngularJs ng-options

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

<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动画（一）

AngularJs ng-options相关推荐

JS中使用FormData上传文件、图片的方法
参考博客:http://www.cnblogs.com/xiaohuochai/p/6543019.html http://www.cnblogs.com/qcloud1001/p/6839541.h ...
Java库可以软件著作权,(最新整理)软件著作权-源代码范本
<(最新整理)软件著作权-源代码范本>由会员分享,可在线阅读,更多相关<(最新整理)软件著作权-源代码范本(127页珍藏版)>请在人人文库网上搜索. 1.完整)软件著作权-源代 ...
.Net Core应用框架Util介绍（一）
距离上次发文,已经过去了三年半,这几年技术更新节奏异常迅猛,.Net进入了跨平台时代,前端也被革命性的颠覆. 回顾 2015年,正当我还沉迷于JQuery + EasyUi的封装时,突然意识到技术已经 ...
访客模式无痕模式区别_访客设计模式示例
访客模式无痕模式区别本文是我们名为" Java设计模式 "的学院课程的一部分. 在本课程中,您将深入研究大量的设计模式,并了解如何在Java中实现和利用它们. 您将了解模式如 ...
用c语言编制牛顿法程序,求解试用newton法求函数,YTU 2405: C语言习题牛顿迭代法求根...
2405: C语言习题牛顿迭代法求根时间限制: 1 Sec 内存限制: 128 MB 提交: 562 解决: 317 题目描述用牛顿迭代法求根.方程为ax3+bx2+cx+d=0.系数a,b ...
Aircrack-ng使用手册
文章目录 Aircrack-ng 说明 aircrack-ng – 802.11 WEP和WPA / WPA2-PSK密钥破解程序 aircrack-ng用法实例 WPA单词表模式基本的WEP破解 ...
走进AngularJs(二) ng模板中常用指令的使用方式
通过使用模板,我们可以把model和controller中的数据组装起来呈现给浏览器,还可以通过数据绑定,实时更新视图,让我们的页面变成动态的.ng的模板真是让我爱不释手.学习ng道路还很漫长,从模板 ...
python中options设置_如何在AngularJS的ng-options中设置value属性？
小编典典 ngOptions(可选) – { comprehension_expression=} –以下形式之一: 对于数组数据源 : label for value in array select ...
AngularJs出现错误Error: [ng:areq]
1.没有对应的控制器 2.有控制器但是路径没有配对转载于:https://www.cnblogs.com/muou2125/p/9543209.html
ng bind html 无效,angularjs中ng-bind-html的用法总结
本篇主要讲解angular中的$sanitize这个服务.此服务依赖于ngSanitize模块.(这个模块需要加载angular-sanitize.js插件) 要学习这个服务,先要了解另一个指令: n ...

AngularJs ng-options

AngularJs ng-options相关推荐

最新文章

热门文章