zoukankan      html  css  js  c++  java
  • AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解

     

    一、用法

    ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上。

    数组:

    label for value in array 
    select as label for value in array
    label group by group for value in array
    select as label group by group for value in array
    select as label group by group for value in array track by trackexpr

    对象:

    label for ( key , value ) in object
    select as label for ( key , value ) in object
    label group by group for ( key , value ) in object
    select as label group by group for ( key , value ) in object
    
    

    说明:

    array / object: 数据源的类型,有数组和对象两种
    value:迭代过程中,引用数组的项或者对象的属性值
    key:迭代过程中,引用对象的属性名
    label:选项显示的标签,用户可看到的
    select:结果绑定到ngModel中,如果没有指定,则默认绑定value
    group:group by的条件,表示按某条件进行分组
    trackexpr:用于唯一确定数组中的迭代项的表达式

    二、实例

    通用的js代码:

    
    
    复制代码
    <script>
        var MyModule = angular.module("MyModule",[]);
        MyModule.controller("Ctrl",["$scope", function($scope){
            $scope.colors = [
                {name:'black', shade:'dark'},
                {name:'white', shade:'light'},
                {name:'red', shade:'dark'},
                {name:'blue', shade:'dark'},
                {name:'yellow', shade:'light'}
            ];
            $scope.object = {
                dark: "black",
                light: "red",
                lai: "red"
            };
        }]);
    </script>
    复制代码

    label for value in array

    html:

    
    
    <select ng-model="myColor" ng-options="color.name for color in colors"></select>
    
    

    效果:

     

    select as label for value in array

    html:

    <select ng-model="myColor" ng-options="color.shade as color.name for color in colors"></select>

    效果:

     


     label group by group for value in array

    html:

    <select ng-model="myColor" ng-options="color.name group by color.shade for color in colors"></select>
    效果:
     

     select as label group by group for value in array

    html:

    <select ng-model="myColor" ng-options="color.name as color.name group by color.shade for color in colors">

    效果:

     

     select as label group by group for value in array track by trackexpr

    html:

    <select ng-model="myColor" ng-options="color.name for color in colors track by color.name">

    效果:

     

     label for ( key , value ) in object

    html:

    <select ng-model="obj" ng-options="key for (key, value) in object"></select>

    效果:

     

     select as label for ( key , value ) in object

    html:

    <select ng-model="obj" ng-options="key as key for (key, value) in object"></select>

    效果:

     

     label group by group for ( key , value ) in object

    html:

    <select ng-model="obj" ng-options="key group by value for (key, value) in object"></select>

    效果:

     

     select as label group by group for ( key , value ) in object

    html:

    <select ng-model="obj" ng-options="key as key group by value for (key, value) in object"></select>

    效果:


     

    Blog:http://www.laixiangran.cn

    GitHub:https://github.com/laixiangran

    Weibo:http://weibo.com/laixiangran

    Email:laixiangran@163.com

    QQ:1452446775

    (微信公众号-前端布道-laixiangran_js)

     
  • 相关阅读:
    接口实际上是定义一个规范、标准
    类必须实现接口中的方法,否则其为一抽象类
    JAVA的核心概念:接口(interface)
    子类的方法必须覆盖父类的抽象方法
    Abstract可以将子类的共性最大限度的抽取出来,放在父类中,以提高程序的简洁性
    如果将一个类设置为abstract,则此类必须被继承使用
    在JAVA中利用public static final的组合方式对常量进行标识
    final可以修饰类、属性、方法
    覆盖不适用于静态方法
    静态方法不需要有对象,可以使用类名调用
  • 原文地址:https://www.cnblogs.com/zhang-wenbin/p/6066551.html
Copyright © 2011-2022 走看看