动态创建的带有填充数组的下拉列表不会使用angular更新
dynamically created dropdowns with populated arrays don't update using angular
我的第一个下拉在页面加载时正确加载,但是子下拉在localstorage的第一个下拉之后加载。问题是,当我加载第二个下拉菜单,并分配它的默认值,我不能再改变它的值。http://jsfiddle.net/silvajeff/x2nrX/3/
angular.module('demoApp', []).controller('DemoController', function($scope) {
//my first drop down loads with the page
$scope.options = [
{ label: 'one', value: 1 },
{ label: 'two', value: 2 },
{ label: 'three', value: 3 },
{ label: 'four', value: 4 },
{ label: 'five', value: 5 }
];
$scope.firstSelect = $scope.options[3];
//the second drop down loads after the first makes a selection. In the real code I am populating the second from localstorage, but once it's assigned its default value I cannot change it.
var init = function(){
//depends on what was selected in first select
$scope.captions = [
{ name: 'A', value: 'a' },
{ name: 'B', value: 'b' },
{ name: 'C', value: 'c' },
{ name: 'D', value: 'd' },
{ name: 'E', value: 'e' }
];
$scope.secondSelect = $scope.captions[1];
}
init();
});
请更改ng-if为ng-show,第二个下拉菜单将起作用http://jsfiddle.net/Wc4CQ/
<body ng-app="demoApp">
<div ng-controller="DemoController">
<div>
<select ng-model="firstSelect"
ng-options="opt as opt.label for opt in options">
</select>
<br><br>
<select ng-show="firstSelect.value == '4'" ng-model="secondSelect"
ng-options="opt as opt.name for opt in captions">
</select><br>
The first select value is {{ firstSelect.value }}<br>
Why can't I get the second select value to update: {{ secondSelect.value }}
</div>
</div>
</body>
或者如果你需要我们ng-if请参阅这里:http://jsfiddle.net/y5Bvv/
<body ng-app="demoApp">
<div ng-controller="DemoController">
<div>
<select ng-model="firstSelect" ng-options="opt as opt.label for opt in options"></select>
<br>
<br>
<select ng-if="firstSelect.value == '4'" ng-model="secondSelect.select" ng-options="opt as opt.name for opt in captions"></select>
<br>The first select value is {{ firstSelect.value }}
<br>Why can't I get the second select value to update: {{ secondSelect.select.value }}</div>
</div>
</body>
JS:
angular.module('demoApp', []).controller('DemoController', function ($scope) {
//my first drop down loads with the page
$scope.options = [{
label: 'one',
value: 1
}, {
label: 'two',
value: 2
}, {
label: 'three',
value: 3
}, {
label: 'four',
value: 4
}, {
label: 'five',
value: 5
}];
$scope.firstSelect = $scope.options[3];
//the second drop down loads after the first makes a selection. In the real code I am populating the second from localstorage, but once it's assigned its default value I cannot change it.
var init = function () {
//depends on what was selected in first select
$scope.captions = [{
name: 'A',
value: 'a'
}, {
name: 'B',
value: 'b'
}, {
name: 'C',
value: 'c'
}, {
name: 'D',
value: 'd'
}, {
name: 'E',
value: 'e'
}];
$scope.secondSelect = {};
$scope.secondSelect.select = $scope.captions[1];
}
init();
});
相关文章:
- Angular:更新一次性绑定的数据
- 通过jQuery添加ng样式属性,angular不更新
- 谷歌地图/Angular JS:地图更新并不总是反映数据,并且可以't删除标记
- Angular没有根据模型更新我的选择元素
- 在日期更改后更新Angular UI引导程序日期选择器选项
- Angular JS-文本框未在独立范围内更新
- 由控制器调用的服务更改时,Angular未更新视图
- 视图ngValue-Angular JS中未更新模型的更改
- 如何在编译时更新yeoman angular中的html路径
- 使用angular更新json值
- 将多模型表单从 Angular 更新为 Sinatra
- 将初始 Razor 输出与 Angular 更新相结合
- 如何使用 Angular 更新 NG-Repeat 中的列表
- 如何使用angular更新DOM元素
- Angular:更新服务并在控制器之间共享数据
- Angular:更新子函数中的作用域var
- 如何使用Angular更新Kendo-UI网格上的数据并持久化层级选择?
- Angular 2:更新服务变量和视图
- 动态创建的带有填充数组的下拉列表不会使用angular更新
- 使用Angular更新jQuery Chosen选定的值