Angularjs select的使用
2024-03-24 23:13:09
实例一：基本下拉效果
usage: label for value in array
<!-- lang: html -->
<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
<!-- lang: html -->
<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
<!-- lang: html -->
<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
<!-- lang: html -->
<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的值
最新文章
- 《JS设计模式笔记》 5,适配器模式
- garbage collection - 垃圾收集
- GCJ 2015-Qualification-C Dijkstra 特殊注意,展开 难度:2
- 从linux内核中学到的编程技巧 【转】
- Oracle EBS-SQL (PO-18):检查工作台下达的PR在系统找不到.sql
- JAVA可变参数实例
- Design Pattern Memo 备忘录设计模式
- MVC轻量web应用
- readonly 和 disabled的区别
- maven_SSM集成的demo
- SpringMVC+ Mybatis 配置多数据源 + 自动数据源切换 + 实现数据库读写分离
- C# 获取 mp3文件信息【包括：文件大小、歌曲长度、歌手、专辑】
- python高级变量类型（元组，列表，字典, 字符串和重要方法）
- WARN bzip2.Bzip2Factory: Failed to load/initialize native-bzip2 library system-native, will use pure-Java version
- python中__call__()方法的用法
- Java终止循环体
- J2EE开发环境--RAP
- struts2零配置參考演示样例
- Scrapyd-Client的安装
- 压力测试工具MySQL mysqlslap