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
  • 相关阅读:
    GNU make manual 翻译(九十九)
    GNU make manual 翻译( 九十五)
    Shell的 for 循环小例子
    makefile中对目录遍历的小例子
    GNU make manual 翻译(九十三)
    GNU make manual 翻译( 一百)
    GNU make manual 翻译( 九十七)
    GNU make manual 翻译( 九十八)
    mapserver4.8.3 的readme.win32的中文翻译文件
    遥控器编程
  • 原文地址:https://www.cnblogs.com/facial/p/6952250.html
Copyright © 2011-2022 走看看