ng-options

ng-options + select 就是 angular 的 DDL (drop down list) 了。

   <div ng-app="app" ng-controller="ctrl">
        select value : {{ selectedValue }}
        <select ng-model="selectedValue" ng-options="obj.name for obj in array">
            <option value="" >select</option>
        </select>
    </div>
    var app = angular.module("app", []);
    app.controller("ctrl", ["$scope", "$timeout", function ($scope, $timeout) {
        $scope.array = [{
            id: 5,
            name: "keatkeat",
            group: "A",
            subData: {value : "subKeatkeat"}
        },
        {
            id: 6,
            name: "xinyao",
            group: "B",
            subData: { value: "subXinyao" }
        }];
        $scope.selectedValue = $scope.array[0];
    }]);

这里给的例子是 array 内包含obj

关键在 obj.name for obj in array 这句表达式.

obj in array 是我们常看到的 ng-repeat 的形式 , array 是一个$scope.array . obj 只是一个随意的var

obj.name for 表示 view 将显示name这个属性值, 也就是每一个 option elem 的 text

selectedValue 是array中的一个obj . (这里要注意,这个obj是"引用"哦)

我们知道 html 的 select 是可以group 的。在angular 要实现的话,我们可以修改上面的表达式

obj.name group by obj.group for obj in array

关键就是 group by obj.group

一般上 selectValue 返回的都是一整个obj , 那么如果我们希望只返回obj中的一个属性值的话。

obj.id as obj.name group by obj.group for obj in array

obj.id as 就表示了我们最终的 selectedValue 只是要 id 这个属性值. (如果是这样的话,我们如果想通过 model 来修改 view 的话,我们要写入的也是 id 而不是对象哦)

好了基本上就是这样了。记得不要用ng-repeat来实现 options ,应该用 ng-options来实现 (性能更好)

ng-options 也支持 track by , 关于track by 可以看下面 (track by 是ng-repeat的功能,好处是可以提高性能,原理大概是我们自定义一个 primary key)

http://www.bennadel.com/blog/2556-using-track-by-with-ngrepeat-in-angularjs-1-2.htm

时间: 2024-10-20 12:35:34

ng-options的相关文章

Flume NG 学习笔记(五)Sinks和Channel配置

一.HDFS Sink Flume Sink是将事件写入到Hadoop分布式文件系统(HDFS)中.主要是Flume在Hadoop环境中的应用,即Flume采集数据输出到HDFS,适用大数据日志场景. 目前,它支持HDFS的文本和序列文件格式,以及支持两个文件类型的压缩.支持将所用的时间.数据大小.事件的数量为操作参数,对HDFS文件进行关闭(关闭当前文件,并创建一个新的).它还可以对事源的机器名(hostname)及时间属性分离数据,即通过时间戳将数据分布到对应的文件路径. HDFS目录路径可

Neural Networks Representation ----- Stanford Machine Learning(by Andrew NG)Course Notes

Andrew NG的Machine learning课程地址为:https://www.coursera.org/course/ml 神经网络一直被认为是比较难懂的问题,NG将神经网络部分的课程分为了两个星期来介绍,可见Neural Networks内容之多.言归正传,通过之前的学习我们知道,使用非线性的多项式能够帮助我们建立更好的分类模型.但当遇特征非常多的时候,需要训练的参数太多,使得训练非常复杂,使得逻辑回归有心无力. 例如我们有100个特征,如果用这100个特征来构建一个非线性的多项式模

嘿!@野兽,你的ng api 掉了 - - angular.forEach

@野兽的 ng api 学习 -- angular.forEach angular.forEach 调用迭代器函数取每一项目标的集合,它可以是一个对象或数组.迭代器函数与迭代器(value.key)一起调用,其中值是一个对象属性或数组元素的值,而数组元素是对象属性的关键或数组元素索引.为函数指定一个可选的上下文. 格式:angular.forEach(obj,iterator,[context]); obj:遍历的对象 iterator:迭代器 [content]: 对象为迭代器函数的上下文(t

【oracle】oracledba4 when you need to change storage options

In which scenarios would you rebuild an index? (Choose all that a pply.) A. when you need to disable the index usage B. when you need to change storage options C. when you need to enable index monitoring D. when you need to move the index to another 

java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFil

项目启动时报错:java.lang.ClassNotFoundException: org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter struts2的jar包版本号为2.1.8,所以类名是没有错误的,而jar包确实加入进去了.jar包加入的方式是通过user library. 问题解决的办法是:将jar包拷贝到WEB-INF下lib文件夹目录,重新启动tomcat问题解决. ================

Kickstart Options

The following options can be placed in a kickstart file. If you prefer to use a graphical interface for creating your kickstart file, use the Kickstart Configurator application. Refer to Chapter 29, Kickstart Configurator for details. Note If the opt

ng build --aot --prod生成文件报错

Cannot read property 'create' of undefined when building with --prod or --aot 解决方案:改变zone.js的版本号为0.8.5: 然后删除dist ng_modules,然后重装下就可以正常使用了. /*更新angular-cli*/npm uninstall -g angular-cli npm cache clean npm install -g @angular/[email protected] /*更新引用r

ng $scope与$rootScope的关系

$scope与$rootScope的关系:①不同的控制器之间 是无法直接共享数据②$scope是$rootScope的子作用域对象$scope的id是随着控制器的加载顺序依次递增,$rootScope的id是1 ③不同控制器之间如何通信??1.借助于$rootScope2.既然子作用域对象可以调用父作用域对象的值或者方法,就可以通过控制器之间的嵌套来实现通信3.事件父->子$scope.$broadcast('eventName',args) 子->父$scope.$emit('eventNa

Allow Pin Swapping Using these Methods options

Frm:http://techdocs.altium.com/display/ADOH/Pin,+Pair+and+Part+Swapping#Pin,PairandPartSwapping-SwapManagerDialog Controlling How the Swaps are Performed on the Schematic In the PCB editor pin, pair and part swaps are performed by exchanging nets on

Stanford coursera Andrew Ng 机器学习课程编程作业(Exercise 2)及总结

Exercise 1:Linear Regression---实现一个线性回归 关于如何实现一个线性回归,请参考:http://www.cnblogs.com/hapjin/p/6079012.html Exercise 2:Logistic Regression---实现一个逻辑回归 问题描述:用逻辑回归根据学生的考试成绩来判断该学生是否可以入学. 这里的训练数据(training instance)是学生的两次考试成绩,以及TA是否能够入学的决定(y=0表示成绩不合格,不予录取:y=1表示录