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
  • 相关阅读:
    Handlebars模板引擎简单使用
    SpringMVC学习笔记001-服务器端获取JSON字符串并解析
    EL表达式的使用
    SpringMVC学习笔记001
    ExtJS学习之路碎碎念
    Microsoft Word 使用技巧总结
    驼峰命名法
    视图生命周期
    git命令
    git的使用1[转]
  • 原文地址:https://www.cnblogs.com/facial/p/6952250.html
Copyright © 2011-2022 走看看