zoukankan      html  css  js  c++  java
  • ng-option

    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>

    效果:

    AngularJS select详细用法

    说明

    1. usage中的 value 也就是 ng-options 中的 m,而 m 是数组model的一个元素,它是一个变量
    2. 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>

    效果

    AngularJS select详细用法

    说明

    1. 可以看到,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>

    效果

    AngularJS select详细用法

    说明

    1. 这里使用了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>

    效果

    AngularJS select详细用法

    说明

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

    参考

    1. http://docs.angularjs.org/api/ng.directive:select
    2. http://blog.miniasp.com/post/2013/05/12/AngularJS-ng-module-select-ngOptions-usage-samples.aspx
     

    一、用法

    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>

    效果:

  • 相关阅读:
    Eclipse去掉js错误校验
    教学平台详细设计
    CentOS 6.3下部署LVS(NAT)+keepalived实现高性能高可用负载均衡
    通过CentOS克隆虚拟机后发现无法启动网卡或无法上网的解决办法
    使用U盘引导安装CentOS操作系统
    项目的热加载
    【转载】SQLServer全文搜索
    【转载】Lucence.Net
    【转载】Discuz!NT企业版之Sphinx全文搜索
    【转载】MySQL主从复制(MasterSlave)与读写分离(MySQLProxy)实践
  • 原文地址:https://www.cnblogs.com/s-quan/p/6005031.html
Copyright © 2011-2022 走看看