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配置方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

您可能感兴趣的文章:

  • AngularJS学习笔记之ng-options指令
  • AngularJS实现select的ng-options功能示例
  • 详解使用angularjs的ng-options时如何设置默认值(初始值)
  • angular指令笔记ng-options的使用方法
  • AngularJS基础 ng-options 指令详解
赞 (0)

相关推荐

  • 详解使用angularjs的ng-options时如何设置默认值(初始值)

    详解使用angularjs的ng-options时如何设置默认值(初始值)

    这两天我用ng-options过程中遇到的初始值为空白的问题,记得去年就遇到过,怎么解决的忘记了,费了一阵子功夫之后解决了,想记下来,方便遇到同样问题的小伙伴当然还有自己. 1.场景: 就是做一个查询列表的弹窗,其中有一个条件需要用到下拉菜单,数据是用过ajax传递过去的. 2.实现: a.html: <select ng-model="myselect" ng-options="o for o in options"></select> b

  • AngularJS基础 ng-options 指令详解

    AngularJS ng-options 指令 AngularJS 实例 使用数组元素填充下拉列表: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head>

  • angular指令笔记ng-options的使用方法

    angular指令笔记ng-options的使用方法

    1.ng-options指令用途: 在表达式中使用数组或对象来自动生成一个select中的option列表.ng-options与ng-repeat很相似,很多时候可以用ng-repeat来代替ng-options.但是ng-options提供了一些好处,例如减少内存提高速度,以及提供选择框的选项来让用户选择.当select中一个选项被选择,该选项将会使用ng-model自动绑定到对应数据上.如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection

  • AngularJS学习笔记之ng-options指令

    1.基本下拉效果(lable for value in array) 其中select标签中的ng-model属性必须有,其值为选中的对象或属性值. <div ng-controller="ngselect"> <p>usage:label for value in array</p> <p>选项,{{selected}}</p> <select ng-model="selected" ng-opti

  • AngularJS实现select的ng-options功能示例

    本文实例讲述了AngularJS实现select的ng-options功能.分享给大家供大家参考,具体如下: controller .controller('MainController', function($scope, $http, $ionicModal, $timeout) { var post = {}; $http.get("data/themeData.json") .success(function(response) { $scope.themeData = res

  • 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]; 对象数组方式 数据是对象数组

  • AngularJS select加载数据选中默认值的方法

    问题描述: 在我们开发项目过程中,避免不了会用到select下拉框,那么在angular中如何使用select呢? 解决方案: 可以用ng-options来动态加载option,然后在用ng-model来匹配.代码如下: //html <select ng-model="role_id1" ng-options="o.name for o in list5"></select> //js $scope.list5 = [{"id&q

  • angularJs select绑定的model取不到值的解决方法

    前端直接绑定值,不传参数,controller中会一直取到初始化的值,无法实时获取前端select改变的值. 解决方法一:前端调用方法的时候,一边传参数(亲测可用) <select ng-model="speed" name="speed" ng-change="vm.h5Video().Playspeed(speed)> <option value="1" selected="selected"&

  • mysql 5.7.13 安装配置方法图文教程(win10 64位)

    本文实例为大家分享了mysql 5.7.13 winx64安装配置方法图文教程,供大家参考,具体内容如下 (1) 下载MySQL程序,您可以从MySQL官网上下载,或者点击这里下载 (2) 解压mysql-5.7.13-winx64.zip文件到你想安装的目录,我的例子是 D:\program\mysql-5.7.13-winx64.其中的目录结构如下: 文件夹:bin docs include lib share 文件: COPYING README my-default.ini (3) 拷贝

  • Linux下进程数量的限制pid_max的配置方法

    这是在阅读另外一个产品的告警指导书时,无意中发现 pid_max 这个参数. 原来Linux内核对于进程的数量使用 pid_max 做控制. 做一些简单的试验,如下演示获取当前配置值的方法: # cat /proc/sys/kernel/pid_max 32768 # sysctl -a|grep pid_max kernel.pid_max = 32768 如下是 sysctl 命令的帮助. # sysctl -h Usage: sysctl [options] [variable[=valu

  • Gunicorn运行与配置方法

    Gunicorn"绿色独角兽"是一个被广泛使用的高性能的Python WSGI UNIX HTTP服务器,移植自Ruby的独角兽(Unicorn )项目,使用pre-fork worker模式,具有使用非常简单,轻量级的资源消耗,以及高性能等特点. 安装gunicorn: $ sudo apt-get update $ sudo apt-get install gunicorn 运行gunicorn: $ gunicorn [OPTIONS] 模块名:变量名 模块名是python文件名

  • AngularJS实现动态添加Option的方法

    AngularJS实现动态添加Option的方法

    本文实例讲述了AngularJS实现动态添加Option的方法.分享给大家供大家参考,具体如下: 项目中后台管理设置,前台下拉动态添加option <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&q

  • mysql 5.7 安装配置方法图文教程

    mysql 5.7 安装配置方法图文教程

    本文教程为大家分享了mysql5.7安装配置方法,供大家参考,具体内容如下 mysql-installer-community-5.7.9.1各版本相关说明: mysql-installer-web-community-5.7.9.0 : 有web标识的表示在线安装: mysql-installer-community-5.7.9.1 : 没有web标识的表示离线安装: mysql-cluster-gpl-7.4.8-winx64 : 单独这个是没有用的,需要在mysql-installer-c

  • js给selected添加options的方法

    本文实例讲述了js给selected添加options的方法.分享给大家供大家参考.具体实现方法如下: <select id="Mmonth"> <option>1</option> </select> <input type="button" onclick="a()" value="添加"/> <script> function a(){ docume

  • mysql 5.7.14 安装配置方法图文教程

    mysql 5.7.14 安装配置方法图文教程

    因笔者个人需要需要在本机安装Mysql,先将安装过程记录如下,希望对他人有所参考. 一.下载软件 1. 进入mysql官网,登陆自己的oracle账号,下载Mysql-5.7.14,下载地址:http://dev.mysql.com/downloads/mysql/ 2.将下载好的文件解压到指定目录,笔者解压在C:\software\Mysql\mysql-5.7.14-winx64 二. 安装过程 1.首先配置环境变量path,将C:\software\Mysql\mysql-5.7.14-w

随机推荐