AngularJS动态绑定ng-options的ng-model实例代码


Posted in Javascript onJune 21, 2017

什么情况下会需要动态绑定 ng-model 呢?若你的数据结构长得像是下面这样:

var Classes = [
{
"Name" : "温度 " ,
"Options" : [ "Cold" , "Hot" , "Normal" ]},
{
"Name" : "份量 " ,
"Options" : [ "Big" , "Middle" , "Small" ]}
];

此时你需要用 ng-repeat 将数据展开,并且将 Options 个别设置为 ng-options 的数据,此时就须要动态去绑定 ng-model,那么该如何绑呢?你可能需要在你的 Controller 底下加上一个变量来做这些动态呈现的 ng-options 的数据指定。

说的这么抽象,不如马上来看下吧。

<!-- DOM -->
<div class ="container">
<div ng-repeat= "class in classes">
{{className}}
<select ng-model="SelectdCollection[className]" ng-options="option for option in classOptions" ></select>

</div>
<a class="btn btn-success" ng-click= "submit()">送出 </a> 
</div>


// Javascript
function DemoController($scope){
$scopeclasses = [
{
"Name": "温度 ",
"Options" : ["Cold" , "Hot", "Normal"]
},
{

"Name": "份量 ",
"Options" : ["Big" , "Middle" , "Small" ]
}
];
$scopeSelectdCollection = {};
$scopesubmit = function() {
console log($scope SelectdCollection);

};
}

在这一小段程序代码中,我们在 DemoController 里面宣告了 $scope.SelectdCollection,这就是刚才提到的承接动态 ng-model 值的对象,这边定义了一个按钮,按下之后可以及时把动态呈现的 ng-options 所选的值丢到开发者工具的 console 去。

实际画面会是长这样。

AngularJS动态绑定ng-options的ng-model实例代码 

按下送出可以在开发者工具看到如下的 log,成功取得资料。

AngularJS动态绑定ng-options的ng-model实例代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javaScript 读取和设置文档元素的样式属性
Apr 14 Javascript
jQuery中add实现同时选择两个id对象
Oct 22 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
Js获取数组最大和最小值示例代码
Oct 29 Javascript
深入分析node.js的异步API和其局限性
Sep 05 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
Oct 27 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
原生js实现each方法实例代码详解
May 27 Javascript
微信小程序实现点击效果
Jun 21 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
vue实现在线翻译功能
Sep 27 Javascript
js实现带箭头的进度流程
Mar 26 Javascript
Angular中ng-options下拉数据默认值的设定方法
Jun 21 #Javascript
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
详解Angular 自定义结构指令
Jun 21 #Javascript
详解Angular2 之 结构型指令
Jun 21 #Javascript
JavaScript用200行代码制作打飞机小游戏实例
Jun 21 #Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 #Javascript
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
You might like
phpMyAdmin 安装及问题总结
2009/05/28 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
JS获取父节点方法
2009/08/20 Javascript
javascript dom 基本操作小结
2010/04/11 Javascript
js实现带圆角的多级下拉菜单效果
2015/08/28 Javascript
异步JS框架的作用以及实现方法
2015/10/29 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
AngularJS页面访问时出现页面闪烁问题的解决
2016/03/06 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
jQuery简单创建节点的方法
2016/09/09 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
ui-router中使用ocLazyLoad和resolve的具体方法
2017/10/18 Javascript
tsconfig.json配置详解
2019/05/17 Javascript
原生js实现碰撞检测
2020/03/12 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
Python配置文件解析模块ConfigParser使用实例
2015/04/13 Python
Python OS模块常用函数说明
2015/05/23 Python
Python聚类算法之基本K均值实例详解
2015/11/20 Python
Python2.7读取PDF文件的方法示例
2017/07/13 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
对Python3+gdal 读取tiff格式数据的实例讲解
2018/12/04 Python
利用python实现在微信群刷屏的方法
2019/02/21 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
python 列表输出重复值以及对应的角标方法
2019/06/11 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Anaconda 查看、创建、管理和使用python环境的方法
2019/12/03 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
你在项目中用到了xml技术的哪些方面?如何实现的?
2014/01/26 面试题
护理自我鉴定范文
2013/10/06 职场文书
人事助理岗位职责
2013/11/18 职场文书
调研报告的主要写法
2019/04/18 职场文书
Python insert() / append() 用法 Leetcode实战演示
2021/03/31 Python
MySQL中varchar和char类型的区别
2021/11/17 MySQL
在虚拟机中安装windows server 2008的图文教程
2022/06/28 Servers