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
  • 相关阅读:
    Mybatis的XML中数字不为空的判断
    初步使用VUE
    Vue中实现菜单下拉、收起的动画效果
    Docker For Windows时间不对的问题
    freemarker使用自定义的模板加载器通过redis加载模板
    .net core 打印请求和响应的内容
    codedecision P1113 同颜色询问 题解 线段树动态开点
    洛谷P2486 [SDOI2011]染色 题解 树链剖分+线段树
    洛谷P3150 pb的游戏(1)题解 博弈论入门
    codedecision P1112 区间连续段 题解 线段树
  • 原文地址:https://www.cnblogs.com/facial/p/6952250.html
Copyright © 2011-2022 走看看