angularjs select 赋值 ng-options配置方法

 更新时间:2018年02月28日 10:41:03   作者:大大的微笑  
下面小编就为大家分享一篇angularjs select 赋值 ng-options配置方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

数组方式

数据是数组

$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

以上这篇angularjs select 赋值 ng-options配置方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Angular2 (RC5) 路由与导航详解

    Angular2 (RC5) 路由与导航详解

    这篇文章主要介绍了Angular2 (RC5) 路由与导航的相关资料,需要的朋友可以参考下
    2016-09-09
  • AngularJS之自定义服务详解(factory、service、provider)

    AngularJS之自定义服务详解(factory、service、provider)

    本篇文章主要介绍了AngularJS之自定义服务详解(factory、service、provider),具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-04-04
  • AngularJS基础 ng-cut 指令介绍及简单示例

    AngularJS基础 ng-cut 指令介绍及简单示例

    本文主要介绍AngularJS ng-cut 指令,这里对ng-cut指令的基础资料进行了整理,和详细介绍,并附上代码示例和实现效果图,学习AngularJS 指令的朋友可以参考下
    2016-08-08
  • angular多选表单数据绑定的简单尝试

    angular多选表单数据绑定的简单尝试

    AngularJS中数据绑定相信大家应该都不陌生了,这篇文章主要给大家介绍了关于angular多选表单数据绑定的简单尝试,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • AngularJS HTML编译器介绍

    AngularJS HTML编译器介绍

    这篇文章主要介绍了AngularJS HTML编译器介绍,AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上,甚至能让你创造具有自定义行为的新元素,需要的朋友可以参考下
    2014-12-12
  • Angular之jwt令牌身份验证的实现

    Angular之jwt令牌身份验证的实现

    这篇文章主要介绍了Angular之jwt令牌身份验证的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-02-02
  • Angularjs的$http异步删除数据详解及实例

    Angularjs的$http异步删除数据详解及实例

    这篇文章主要介绍了Angularjs的$http异步删除数据详解及实例的相关资料,这里提供实现思路及实现具体的方法,需要的朋友可以参考下
    2017-07-07
  • AngularJS bootstrap启动详解及实例代码

    AngularJS bootstrap启动详解及实例代码

    这篇文章主要介绍了AngularJS bootstrap启动的知识,这里整理了相关资料及简单实例代码,,需要的朋友可以参考下
    2016-09-09
  • AngularJS constant和value区别详解

    AngularJS constant和value区别详解

    angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。他们之间有什么不同呢?今天小编给大家分享AngularJS constant和value区别详解,需要的朋友参考下
    2017-02-02
  • 详细解读AngularJS中的表单验证编程

    详细解读AngularJS中的表单验证编程

    这篇文章主要介绍了详细解读AngularJS中的表单验证编程,AngularJS是一个非常热门的JavaScript库,需要的朋友可以参考下
    2015-06-06

最新评论