`
LiYunpeng
  • 浏览: 950984 次
  • 性别: 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-options的使用方法

    在AngularJS中,`ng-options`是一个非常有用的指令,它用于根据数组或对象自动生成`&lt;select&gt;`元素的`&lt;option&gt;`列表。这篇笔记将深入探讨`ng-options`的使用方法,以及它如何与`ng-model`配合工作,提供更高效的数据...

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

    然而,在实际开发中,可能会遇到双向绑定无效果、`ng-model`不能正常显示的问题。本文将深入探讨这个问题,并提供解决方案。 首先,我们要理解AngularJS的双向绑定原理。它通过`$scope`对象将控制器(Controller)...

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

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

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

    在AngularJS中,数据绑定是框架的核心特性之一,它使得模型(model)与视图(view)之间的数据能够自动同步。本文将详细讲解`ng-bind`和`ng-model`这两个指令的区别,并通过实例进行深入解析。 首先,`ng-bind`指令用于...

    angular-select2.zip

    1. 数据绑定:Angular-Select2支持双向数据绑定,这意味着你可以在AngularJS的控制器中直接操作模型,Select2的选择项会实时更新。反之,用户在Select2中的选择也会同步到模型。 2. 自定义模板:利用AngularJS的...

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

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

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

    - `&lt;select ng-model="SelectdCollection[className]" ng-options="option for option in classOptions"&gt;`: 这里的`ng-model`是动态的,它使用`className`作为属性名在`SelectdCollection`对象中创建一个属性,`ng-...

    前端项目-angular-ui-select.zip

    在这个例子中,`ng-model`绑定的是选定项,`items`是数据源,`$select.search`用于过滤搜索结果,`highlight`滤镜则用于高亮显示匹配项。 四、高级用法 1. **自定义模板**:通过`ui-select-templates`指令,可以...

    自定义select加搜索查找angular js

    &lt;select ui-select2 ng-model="selectedItem" data-placeholder="请选择..."&gt; &lt;option ng-repeat="item in items" value="{{item.id}}"&gt;{{item.name}} &lt;/select&gt; ``` 最后,为了优化用户体验,我们还可以添加一些...

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

    `&lt;select&gt;`元素的`ng-model`属性绑定到`$scope.post.kmForumCategoryId`,这意味着当用户选择一个主题时,`post`对象会更新其`kmForumCategoryId`属性为选定主题的`id`。 此外,`&lt;select&gt;`还有一个预定义的空选项...

    ng-file-upload-master.zip

    4. **使用指令**:在HTML模板中使用`ngf-select`或`ngf-drop`指令来绑定文件选择或拖放事件,同时可以通过`ng-model`绑定待上传的文件列表。 5. **处理上传逻辑**:在文件选择或拖放事件触发后,通过ng-file-upload...

    解决angularJS中input标签的ng-change事件无效问题

    当用户选择文件后,虽然文件选择器的值确实改变了,但`ng-model`不会自动更新,因此`ng-change`也不会被触发。 为了解决这个问题,我们可以利用JavaScript的原生`onchange`事件来替代`ng-change`。当`...

    angular ng-model 无法获取值的处理方法

    在AngularJS中,`ng-model`是一个非常关键的指令,用于实现数据双向绑定,使得视图层和模型层的数据能够实时同步。然而,在实际开发过程中,可能会遇到`ng-model`无法正确获取或更新值的问题。本文将深入探讨这个...

    angular-file-upload 上传控件

    &lt;div ngf-select ng-model="file" ngf-max-size="5MB"&gt;选择文件 &lt;button ng-click="upload()"&gt;上传 ``` ```javascript var app = angular.module('app', ['ngFileUpload']); app.controller('MainCtrl', function...

    AngularJS基础 ng-model 指令详解及示例代码

    如果scope对象中不存在这个属性,ng-model指令会自动创建这个属性。 ng-model指令不仅可以用于input类型,还支持select和textarea元素。比如,对于一个select元素,我们可以通过ng-model来绑定选中的option与scope...

    Angular中ng-options下拉数据默认值的设定方法

    在AngularJS中,`ng-options`指令用于在`&lt;select&gt;`元素中动态生成选项,它提供了灵活的方式来绑定数据模型到下拉列表。本篇文章聚焦于如何在使用`ng-options`时设定下拉列表的默认选中值。我们将通过一个具体的示例...

    AngularJS入门教程之Select(选择框)详解

    在这个例子中,`ng-app`指令定义了应用程序的边界,`ng-controller`指令定义了一个控制器,`ng-model`指令将select元素的数据模型与作用域上的变量`selectedName`绑定起来。而`ng-options`指令则定义了select元素的...

Global site tag (gtag.js) - Google Analytics