`
LiYunpeng
  • 浏览: 938153 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

Angular中,select的ng-model深度绑定对象不更新选择项的解决办法

阅读更多
这个问题困扰了一下午

查看官方的API中描述,ng-model是对比对象引用,当对象引用发生了变化才会触发change

而我之前是因为加有除了数据源意外的数据,所以试用了ng-repeat,以及用$index来做select的value,但是更新scope.xxxModel.data的时候,select选择框的选项却不跟着更新


解决办法如下
使用ng-options来生成option,默认存在的值依然可以写,如下
<select ng-model="editModel.selTreeListItem" ng-options="node.id as node.label for node in xxxModel.data" >
    <option value="">根节点</option>
 </select>


其中node.id表示option的value的字段,node.label代表显示的内容的字段 后边的node则代表为循环数据源起得别名

这样,既可以添加默认值,而绑定的ng-model的值绑定的直接就是数据源的对象了,直接获取对应的对象,设置默认值时,将ng-model的值设置为xxxModel.data对应数组的对象即可了


可参看如下
http://jsfiddle.net/sseletskyy/uky9m/1/
分享到:
评论

相关推荐

    Angular中ng-bind和ng-model的区别实例详解

    ng-bind是单向绑定,由作用于$scope到view层,且在HTML控件(HTML控件有:input、select、button和textarea)中不可显示。 ng-model是双向绑定,$scope&lt;—&gt;view层。 {{}}用于显示数据。 完整代码 &lt;!DOCTYPE ...

    基于AngularJs select绑定数字类型的问题

    使用ng-model绑定select的时候默认是string字符串,如果指定的number值会绑定失败 举例说明: &lt;body ng-app='module' ng-controller=myCtrl&gt; 请选择性别: &lt;select name=sex ng-model='sex' &gt; 请...

    angularjs在ng-repeat中使用ng-model遇到的问题

    在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变。上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况...

    AngularJS ng-model 指令

    AngularJS ng-model 指令 ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。 AngularJS 实例  名字:...

    解决angular双向绑定无效果,ng-model不能正常显示的问题

    今天小编就为大家分享一篇解决angular双向绑定无效果,ng-model不能正常显示的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

    当select中一个选项被选择,该选项将会使用ng-model自动绑定到对应数据上。如果你想设一个默认值,可以像这样:$scope.selected = $scope.collection[3]。 1.1 track by的用途: track by主要是防止值有重复,...

    AngularJS中ng-options实现下拉列表的数据绑定方法

    下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个...上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定,然后列表中的选项是activities中的每一个值。数据如下: $scope.engineer =

    AngularJS使用ng-options指令实现下拉框

    一般情况下,select下都会有option,但是AngularJS中有指令ng-options,就可以实现select下拉框 2、实现源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;AngularJS...

    angular 表单验证器验证的同时限制输入的实现

    angular里面对于表单验证,设置了很多指令。...ng-model 实现双数据绑定 ng-show 根据一定的逻辑实现显示 ng-cloak 绑定在节点上,防止节点渲染,angular指令闪烁 ng-class class类名根据你的逻辑,出现 n

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

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

    AngularJS中下拉框的基本用法示例

    本文实例讲述了AngularJS中下拉框的基本用法。分享给大家供大家参考,具体如下: ... &lt;div ng-app=myApp ng-controller=myCtrl&gt; ...-- ng-repeat绑定的值为一个字符串,ng-options绑定的为一个对象 --&gt; &lt;se

    AngularJS使用ngOption实现下拉列表的实例代码

    下拉列表的简单使用 ng-option指令使用很简单,只需要绑定两个属性...上面这条语句就是把选择的值与engineer.currentActivity进行双向数据绑定,然后列表中的选项是activities中的每一个值。数据如下: $scope.engi

    AngularJS 模型详细介绍及实例代码

    ng-model 指令用于绑定应用程序数据到 HTML 控制器(input, select, textarea)的值。 ng-model 指令 ng-model 指令可以将输入域的值与 AngularJS 创建的变量绑定。 AngularJS 实例 &lt;!DOCTYPE html&gt; &lt;...

    Vue表单之v-model绑定下拉列表功能

    vue要绑定下拉列表会稍微有点不同。 因为下拉列表不是一个标签能搞掂的。 ... &lt;select&gt; &lt;option value=Vue.js&gt;Vue.js ...在Vue中要绑定,需要把 v-model 写在 select 标签里。 代码如下 &lt;div id=

    AngularJS入门教程之双向绑定详解

    在这一步你会增加一个让用户控制手机列表显示顺序的特性。动态排序可以这样实现,添加一个新的模型属性,把它和迭代器集成起来,然后让数据绑定完成剩下的事情...select ng-model="orderProp"&gt; &lt;option value="n

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第007讲 ng-model在表单中双向绑定实例分析讲解.mp4 ├最新AngularJS开发宝典—第008讲 ng-value的使用实例讲解.mp4 ├最新AngularJS开发宝典—第009讲 实例讲解angular控制单选框.mp4 ├...

    AngularJS 表单

    Input 控件使用 ng-model 指令来实现数据绑定。 通过以上代码应用有了一个名为 firstname 的属性。 它通过 ng-model 指令来绑定到你的应用。 firstname 属性可以在 controller 中使用: 实例 var app = ...

    自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框

    先说点闲话,熟悉Angular的猿们会喜欢这个插件的。 00.本末倒置 不得不承认我是一个喜欢本末倒置的人,学生时代就喜欢先把晚交的作业先做,留着马上就要交的作业不做,然后慢悠悠做完不重要的作业,卧槽,XX作业...

    AngularJs Forms详解及简单示例

    请记住,虽然客户端验证在提供良好的用户体验中扮演重要的角色,但是它可以很简单地被绕过,因此,客户端验证是不可信的。服务端验证对于一个安全的应用来说仍然是必要的。 一、Simple form  理解双向数据绑定的...

Global site tag (gtag.js) - Google Analytics