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
  • 相关阅读:
    贪心算法 Wooden Sticks
    HDOJ 2189 悼念512汶川大地震遇难同胞——来生一起走
    hdoj1069 Monkey and Banana(最长上升子序列)
    2012级计科《程序设计基础Ⅱ》期末上机考试
    Constructing Roads In JGShining's Kingdom
    c语言学习随笔之指针(二)
    c语言学习随笔之指针(一)
    遍历网页框架结构
    笔记本测试软件(让奸商头疼的软件)0
    ResizePicturevb.net
  • 原文地址:https://www.cnblogs.com/facial/p/6952250.html
Copyright © 2011-2022 走看看