zoukankan      html  css  js  c++  java
  • 转: angularjs select 赋值 ng-options配置方式

    摘自: http://blog.csdn.net/chwshuang/article/details/53861249

    数组方式

    数据是数组

    1 $scope.years = [2014, 2015, 2016];

    页面元素

     <select ng-model="item" ng-options="item as y for y in years">
     </select>

    设置默认值 

    如果需要设置默认的选项,可以先设置一个参数:

    $scope.item = 2016;
    $scope.years = [2014, 2015, 2016];

    对象数组方式


    数据是对象数组

    $scope.sites = [
        {site : "baidu", url : "https://www.baidu.com"},
        {site : "163", url : "http://www.163.com"},
        {site : "sina", url : "http://www.sina.com"}
    ];

    页面元素

    <select ng-model="s.site" ng-options="s.site as s.site group by site.group for s in sites">
     </select>

    设置默认值 
    如果需要设置默认的选项,可以先设置一个参数:

    $scope.site = "163";
    $scope.sites = [
        {site : "baidu", url : "https://www.baidu.com"},
        {site : "163", url : "http://www.163.com"},
        {site : "sina", url : "http://www.sina.com"}
    ];

    Key-Vules对象数组方式


    数据是对象数组

    $scope.cars = {
    car1 : {brand : "BYD", model : "Y50", color : "red"},
    car2 : {brand : "CC", model : "HF", color : "white"},
    car3 : {brand : "JL", model : "JL10D", color : "black"}
    };

    页面元素

    <select ng-model="myCar" ng-options="y.brand for (x, y) in cars">
    </select>

    设置默认值 
    如果需要设置默认的选项,可以先设置一个参数:

    $scope.site = "BYD";
    $scope.cars = {
    car1 : {brand : "BYD", model : "Y50", color : "red"},
    car2 : {brand : "CC", model : "HF", color : "white"},
    car3 : {brand : "JL", model : "JL10D", color : "black"}
    };

    angularjs ng-options官方API

    数组类型:

    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 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 ob
  • 相关阅读:
    关于阿里云带宽监控指标记录
    mongodb备份还原
    squid3.5缓存代理实践记录
    kafka依赖zookeeper原因解析及应用场景
    Zookeeper+Kafka集群部署(转)
    dubbo框架提供Main方法运行容器的几种方式(转)
    html标签简介(常用)
    数据库中和表并列的其他对象
    外键约束
    数据库中的约束
  • 原文地址:https://www.cnblogs.com/facial/p/6952250.html
Copyright © 2011-2022 走看看