这个问题困扰了一下午
查看官方的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/
分享到:
相关推荐
在AngularJS中,`ng-options`是一个非常有用的指令,它用于根据数组或对象自动生成`<select>`元素的`<option>`列表。这篇笔记将深入探讨`ng-options`的使用方法,以及它如何与`ng-model`配合工作,提供更高效的数据...
然而,在实际开发中,可能会遇到双向绑定无效果、`ng-model`不能正常显示的问题。本文将深入探讨这个问题,并提供解决方案。 首先,我们要理解AngularJS的双向绑定原理。它通过`$scope`对象将控制器(Controller)...
使用ng-model绑定select的时候默认是string字符串,如果指定的number值会绑定失败 举例说明: <body ng-app='module' ng-controller=myCtrl> 请选择性别: <select name=sex ng-model='sex' > 请...
在AngularJS中,数据绑定是框架的核心特性之一,它使得模型(model)与视图(view)之间的数据能够自动同步。本文将详细讲解`ng-bind`和`ng-model`这两个指令的区别,并通过实例进行深入解析。 首先,`ng-bind`指令用于...
1. 数据绑定:Angular-Select2支持双向数据绑定,这意味着你可以在AngularJS的控制器中直接操作模型,Select2的选择项会实时更新。反之,用户在Select2中的选择也会同步到模型。 2. 自定义模板:利用AngularJS的...
在ng-repeat中使用ng-model时会有许多问题,有的人碰到无法获取绑定的数据内容,有的人遇到改动绑定的数据内容时所有循环生成的内容一起改变。上面的问题我在开发时也遇到过,但是解决后我却怎么也还原不了那种情况...
- `<select ng-model="SelectdCollection[className]" ng-options="option for option in classOptions">`: 这里的`ng-model`是动态的,它使用`className`作为属性名在`SelectdCollection`对象中创建一个属性,`ng-...
在这个例子中,`ng-model`绑定的是选定项,`items`是数据源,`$select.search`用于过滤搜索结果,`highlight`滤镜则用于高亮显示匹配项。 四、高级用法 1. **自定义模板**:通过`ui-select-templates`指令,可以...
<select ui-select2 ng-model="selectedItem" data-placeholder="请选择..."> <option ng-repeat="item in items" value="{{item.id}}">{{item.name}} </select> ``` 最后,为了优化用户体验,我们还可以添加一些...
`<select>`元素的`ng-model`属性绑定到`$scope.post.kmForumCategoryId`,这意味着当用户选择一个主题时,`post`对象会更新其`kmForumCategoryId`属性为选定主题的`id`。 此外,`<select>`还有一个预定义的空选项...
`ng-model`用于双向数据绑定,`ui-select2`是ui-select2指令,`multiple`属性表示多选: ```html <select multiple ng-model="selectedItems" ui-select2> <option ng-repeat="item in items" value="{{item.id}}...
4. **使用指令**:在HTML模板中使用`ngf-select`或`ngf-drop`指令来绑定文件选择或拖放事件,同时可以通过`ng-model`绑定待上传的文件列表。 5. **处理上传逻辑**:在文件选择或拖放事件触发后,通过ng-file-upload...
当用户选择文件后,虽然文件选择器的值确实改变了,但`ng-model`不会自动更新,因此`ng-change`也不会被触发。 为了解决这个问题,我们可以利用JavaScript的原生`onchange`事件来替代`ng-change`。当`...
在AngularJS中,`ng-model`是一个非常关键的指令,用于实现数据双向绑定,使得视图层和模型层的数据能够实时同步。然而,在实际开发过程中,可能会遇到`ng-model`无法正确获取或更新值的问题。本文将深入探讨这个...
<div ngf-select ng-model="file" ngf-max-size="5MB">选择文件 <button ng-click="upload()">上传 ``` ```javascript var app = angular.module('app', ['ngFileUpload']); app.controller('MainCtrl', function...
如果scope对象中不存在这个属性,ng-model指令会自动创建这个属性。 ng-model指令不仅可以用于input类型,还支持select和textarea元素。比如,对于一个select元素,我们可以通过ng-model来绑定选中的option与scope...
在AngularJS中,`ng-options`指令用于在`<select>`元素中动态生成选项,它提供了灵活的方式来绑定数据模型到下拉列表。本篇文章聚焦于如何在使用`ng-options`时设定下拉列表的默认选中值。我们将通过一个具体的示例...