html5option的js代码,ng-option(示例代码)

select 是 AngularJS 预设的一组directive。下面是其官网api doc给出的用法：AngularJS:select

大意是，select中的ngOption可以采用和ngRepeat指令类似的循环结构，其data source可以是array或者是object。针对两种data source又有衍生的好几种用法。但是官网的例子实在是太少了。

下面是针对几个不太容易理解的用法的例子。

先上controller

function selectCtrl($scope) {

$scope.selected = ‘‘;

$scope.model = [{

id: 10001,

mainCategory: ‘男‘,

productName: ‘水洗T恤‘,

productColor: ‘白‘

}, {

id: 10002,

mainCategory: ‘女‘,

productName: ‘圆领短袖‘,

productColor: ‘黑‘

}, {

id: 10003,

mainCategory: ‘女‘,

productName: ‘短袖短袖‘,

productColor: ‘黃‘

}];

}

实例一：基本下拉效果

usage: label for value in array

-- 请选择 --

效果:

说明

usage中的 value 也就是 ng-options 中的 m，而 m 是数组model的一个元素，它是一个变量

usage中的 label 也就是 ng-options 中的m.productName，其实就是一个 AngularJS Expression

实例二：自定义下拉显示名称

usage: label for value in array

-- 请选择 --

效果

说明

可以看到，usage 中的 label 可以根据需求拼接出不同的字符串

实例三：让选项分组

usage: label group by group for value in array

-- 请选择 --

效果

说明

这里使用了group by，通过$scope.model中的mainCategory字段进行分组

实例四：自定义ngModel的值

usage: select as label for value in array

-- 请选择 --

效果

说明

这种用法也是select指令最复杂的一种。从效果中可以看出，usage中select的作用就是重新定义ng-model的值。在这里，ng-model等于m.id，当ng-model发生改变的时候，得到的是m.id的值

参考

http://docs.angularjs.org/api/ng.directive:select

http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx

html5option的js代码,ng-option(示例代码)相关推荐

php dropzone.js中文教程,使用Dropzone.js上传的示例代码
本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区引入Dro ...
dropzone.js应用java_使用Dropzone.js上传的示例代码
本文介绍了使用Dropzone.js上传的示例代码,分享给大家,具体如下: 说明:后台用的python的flask框架,后台对你理解这篇文章没什么影响,你可以使用php form作为上传区引入Dro ...
arcgis sample代码之SOE示例代码PageLayout REST Server Object Extension 的源码分析
0.前言研究 arcgis object的代码是十分重要的,对于学习arcObject太重要了,因为没有这些代码,学习混乱的arcObject将会更佳的困难. 我的arcgis server 是10 ...
js设置单选按钮选中示例代码
js设置单选按钮选中/取消示例代码用jquery的代码设置,第一次有效果,第二次就没效果了,所以用百度了一下,用js原生代码设置就行! <!DOCTYPE html PUBLIC " ...
html代码圣诞树位置代码,html 圣诞树(示例代码)
简介这篇文章主要介绍了html 圣诞树(示例代码)以及相关的经验技巧,文章约1263字,浏览量499,点赞数8,值得推荐! div{ width:0px; height:0px; background ...
怎么精炼java代码_网页播放器开发（四）代码精炼提纯(示例代码)
四.精简提炼我们的播放器基本实现了,但是代码复用不高,所以我们要进行封装,以插件的形式体现. 1.插件的基本运行代码如下: ;(function(undefined){'use strict'; . ...
使用js对select动态添加和删除OPTION示例代码
动态删除select中的所有options.某一项option以及动态添加select中的项option,在IE和FireFox都能测试成功,感兴趣的朋友可以参考下,希望对大家有所帮助 <sel ...
dropzone java实例_Java实现拖拽文件上传dropzone.js的简单使用示例代码
Java实习生一枚,前端知识薄弱,最近因为工作需要,做了一个拖拽文件上传的功能,发现dropzone.js挺不错的,特地做个笔记. 自己写的拖拽文件至一个按钮上传的功能,前端及java代码如下: js ...
html js获取天气预报,js 读取天气预报信息示例代码（百度地图天气接口）
[实例简介] [实例截图] [核心代码] 郑州市 - 天气预报 html,body{ width: 100%; height: 100%; margin: 0; text-shadow: 1px 0p ...
php json 遍历 keys,详解javascript遍历json对象的key和任意js对象属性的示例代码（图）...
下面小编就为大家带来一篇javascript遍历json对象的key和任意js对象属性实例.小编觉得挺不错的,现在就分享给大家,也给大家做个参考.一起跟随小编过来看看吧使用 keys 方法获取该对象 ...

html5option的js代码,ng-option(示例代码)

html5option的js代码,ng-option(示例代码)相关推荐

最新文章

热门文章