select
是 AngularJS 预设的一组directive。下面是其官网api doc给出的用法:AngularJS:select
大意是,select
中的ngOption
可以采用和ngRepeat
指令类似的循环结构,其data source可以是array或者是object。针对两种data source又有衍生的好几种用法。但是官网的例子实在是太少了。
下面是针对几个不太容易理解的用法的例子。
先上controller
<!-- lang: js -->
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
<select ng-model="selected" ng-options="m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>
效果:
说明
- usage中的 value 也就是 ng-options 中的 m,而 m 是数组model的一个元素,它是一个变量
- usage中的 label 也就是 ng-options 中的
m.productName
, 其实就是一个 AngularJS Expression
实例二:自定义下拉显示名称
usage: label for value in array
<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) for m in model">
<option value="">-- 请选择 --</option>
</select>
效果
说明
- 可以看到,usage 中的 label 可以根据需求拼接出不同的字符串
实例三: 让选项分组
usage: label group by group for value in array
<select ng-model="selected" ng-options="(m.productColor + ' - ' + m.productName) group by m.mainCategory for m in model">
<option value="">-- 请选择 --</option>
</select>
效果
说明
- 这里使用了
group by
,通过$scope.model
中的mainCategory
字段进行分组
实例四:自定义ngModel
的值
usage: select as label for value in array
<select ng-model="selected" ng-options="m.id as m.productName for m in model">
<option value="">-- 请选择 --</option>
</select>
效果
说明
- 这种用法也是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
本文来源于:http://www.codeweblog.com/angularjs-select%E8%AF%A6%E7%BB%86%E7%94%A8%E6%B3%95/
相关推荐
AngularJS的select设置默认值 在使用Angular时候使用select标签时会遇到绑定数据指定默认显示值可这样实现 <!DOCTYPE html> <html ng-app="noteApp" ng-controller="noteCtrl"> <head> <meta ...
主要为大家详细介绍了AngularJS Select选择框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
在我们开发项目过程中,避免不了会用到select下拉框,那么在angular中如何使用select呢? 解决方案: 可以用ng-options来动态加载option,然后在用ng-model来匹配。代码如下: //html <select ng-model="role_id1...
├最新AngularJS开发宝典—第005讲 $scope的基本使用方法.mp4 ├最新AngularJS开发宝典—第006讲 表达式与ng-bind及ng-cloak解决闪屏问题.mp4 ├最新AngularJS开发宝典—第007讲 ng-model在表单中双向绑定实例分析...
角度多选 AngularJS 的多选小部件。... 用法: angular.module('myApp', ['multi-select', ...]); 例子: <multi-select ng-model="user.roles" available="roles" selected-label="Current roles
该指令允许使用组相关选项创建多个下拉列表。 所选选项的值添加到AngularJS可用的数组中。 依存关系 -v1.3.8 -v1.11.1 -v2.4.1 -v3.3.1 ###演示 ###用法 它是如何工作的? 简单的。 指令告诉编译器附加的...
主要给大家介绍了关于AngularJS动态生成select下拉框的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用AngularJS具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
在Angular.JS中可以使用...关于Angular.js中select的基础相信大家应该都已经了解了,那么下面这篇文章主要给大家介绍了Angular2中select用法之设置默认值与事件的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。
63使用AngularJS自带的路由服务175 基础路由定义175 显示匹配的路由内容176 匹配灵活的路由177 定义默认路由178 访问路由参数178 多个控制器重用局部模板178 路由改变时避免UI抖动179 取消路由更新181 64$...
本文实例讲述了AngularJS中下拉框的基本用法。分享给大家供大家参考,具体如下: HTML正文: <select ng-model=selectedName ng-options=x for x in names></select> 等价于: <select> ...
使用angularjs的引导选择组件 大多数文档位于fz_select.js中,将在以后进行更新 这是组件的演示 这是重写组件样式的方法,这将更改fz-select-bs样式的高度,该样式很小 /** overrides for fz-select **/ / / ...
本文实例讲述了AngularJS中下拉框的高级用法。分享给大家供大家参考,具体如下: HTML正文: <body ng-app=myApp> <!-- 对象内部属性遍历:x--key y---value --> {{sites}} <select ng-model=...
本文实例讲述了AngularJS辅助库browserTrigger用法。分享给大家供大家参考,具体如下: 今天推荐一款来自angularjs源码的单元测试辅助库browserTrigger,这是来自于ngScenario的一段代码。主要用户触发浏览器型行为...
本文实例讲述了AngularJS实现在ng-Options加上index的解决方法。分享给大家供大家参考,具体如下: Angularjs交流群中有位童学问道如何为Angular select的ng-Options像Angularjs的ng-Repeat一样加上一个索引$index. ...
angularjs 动态从后台获取下拉框的值,只要是使用repeat指令,后台提供的是一个list的对象,里面包含value和显示的值,如下: js文件: //职务等级和档次/军衔等级和档次,需要从后台获取:poslist,type:2/3/4/5 $scope....
下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性: 一个是ng-model用于获取选定的值; 另一个是ng-options用于确定下拉列表的元素数组。 <select ng-model="engineer.currentActivity" class=...
今天小编就为大家分享一篇angularJs中ng-model-options设置数据同步的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
使用 bower 安装此插件。 # enter your asset directory bower install angular cn-city-select --save 用法 首先你应该在你的页面中加载 Angularjs,然后加载这个插件。 <!-- place this code into your ...
用法 在您的应用程序/模块中包含模块“davidbohunek.ctrlshiftselect” 使用标准的ng-repeat来呈现你的列表 将属性ctrlshiftselect添加到项目的根元素,例如添加到table或ul元素 在ng-repat项目模板中(参见下面的...
中国城市精选 这是一个插件,可轻松将“中国地区”...用法首先,您应该在页面中加载Angularjs,然后加载此插件。 <!-- place this code into your page --> [removed][removed] <script type="text/javascri