有角度的ng模型在ng重复中不起作用
Angular ng-model not working inside ng-repeat
试图将Json数据绑定到ng中的ng模型中,重复出现错误。
html:
<div ng-controller="Ctrl">
<div>
<table>
<th>
<td>add</td>
<td>edit</td>
<td>delete</td>
</th>
<tr ng-repeat="category in categories">
<td>
<input id="add{{category.id}}" ng-model="add{{category.id}}" type="checkbox">{{category.name}}</td>
<td>
<input id="edit{{category.id}}" ng-model="edit{{category.id}}" type="checkbox">{{category.name}}</td>
<td>
<input id="del{{category.id}}" ng-model="del{{category.id}}" type="checkbox">{{category.name}}</td>
</tr>
</table>
</div>
</div>
Js:
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.selection = {
ids: {"50d5ad": true}
};
$scope.categories = [
{"name": "Sport", "id": "50d5ad" } ,
{"name": "General", "id": "687ffr" },
{"name": "Activities", "id": "678ffb" },
{"name": "Regards", "id": "678fff" },
{"name": "Thanks", "id": "678fer" },
{"name": "Goes", "id": "678fgf" },
{"name": "Oppertnities", "id": "674ffr" },
{"name": "Convince", "id": "654ffr" },
{"name": "Mopols", "id": "623ffr" }
];
}
Fiddle
不能像ng-model="del{{category.id}}"
那样在ng模型中编写{{}}
。请改用数组/对象哈希。例如:ng-model="del[category.id]"
正如Shay
已经提到的,您不能以这种方式在ng模型中使用{{}}
。这里有一个如何实现它的例子:
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.selection_add = {};
$scope.selection_edit = {};
$scope.selection_delete ={};
$scope.categories = [
{"name": "Sport", "id": "50d5ad" } ,
{"name": "General", "id": "687ffr" },
{"name": "Activities", "id": "678ffb" },
{"name": "Regards", "id": "678fff" },
{"name": "Thanks", "id": "678fer" },
{"name": "Goes", "id": "678fgf" },
{"name": "Oppertnities", "id": "674ffr" },
{"name": "Convince", "id": "654ffr" },
{"name": "Mopols", "id": "623ffr" }
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<div>
<table>
<tr>
<th>add</th>
<th>edit</th>
<th>delete</th>
</tr>
<tr ng-repeat="category in categories">
<td><input id="{{category.id + '_add'}}" ng-model="selection_add[category.id]" type="checkbox">{{category.name}}</td>
<td><input id="{{category.id + '_edit'}}" ng-model="selection_edit[category.id]" type="checkbox">{{category.name}}</td>
<td><input id="{{category.id + '_delete'}}" ng-model="selection_delete[category.id]" type="checkbox">{{category.name}}</td>
</tr>
</table>
<h1>Add</h1>
{{selection_add}}
<h1>Edit</h1>
{{selection_edit}}
<h1>Delete</h1>
{{selection_delete}}
</div>
</div>
</div>
如果你想将信息存储在原始数组中,你可以这样实现:
var app = angular.module('app', []);
function Ctrl($scope) {
$scope.categories = [
{"name": "Sport", "id": "50d5ad" } ,
{"name": "General", "id": "687ffr" },
{"name": "Activities", "id": "678ffb" },
{"name": "Regards", "id": "678fff" },
{"name": "Thanks", "id": "678fer" },
{"name": "Goes", "id": "678fgf" },
{"name": "Oppertnities", "id": "674ffr" },
{"name": "Convince", "id": "654ffr" },
{"name": "Mopols", "id": "623ffr" }
];
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="Ctrl">
<div>
<table>
<tr>
<th>add</th>
<th>edit</th>
<th>delete</th>
</tr>
<tr ng-repeat="category in categories">
<td><input id="{{category.id + '_add'}}" ng-model="category.add" type="checkbox">{{category.name}}</td>
<td><input id="{{category.id + '_edit'}}" ng-model="category.edit" type="checkbox">{{category.name}}</td>
<td><input id="{{category.id + '_delete'}}" ng-model="category.delete" type="checkbox">{{category.name}}</td>
</tr>
</table>
{{categories}}
</div>
</div>
</div>
将add
、edit
和del
定义为控制器中的范围变量,而不是add{{category.id}}
使用add[category.id]
等。
<tr ng-repeat="category in categories">
<td><input id="add[category.id]" ng-model="add[category.id]" type="checkbox">{{category.name}}</td>
<td><input id="edit[category.id]" ng-model="edit[category.id]" type="checkbox">{{category.name}}</td>
<td><input id="del[category.id]" ng-model="del[category.id]" type="checkbox">{{category.name}}</td>
</tr>
相关文章:
- 角度ng变化或ng点击选择can'不起作用
- AngularJS ng include dons'不起作用
- ng disabled在chrome中不起作用.按钮在角度上未禁用
- 角度无线电按钮ng模型不起作用
- Angular js+ng repeat+字母数字索引不起作用
- 角度Js ng-disabled不起作用
- AngularJS ng include won'不知什么原因不起作用
- 角度过滤器和ng点击不起作用
- 初始化ng模型时,Angular ui选择占位符不起作用
- 角度去抖动(ng模型选项)不起作用
- angularjs ng点击运行时标记不起作用
- Ng点击don´不起作用
- 为什么ng节目不起作用
- 带有粘性标题的角度ng视图不起作用
- select中布尔值的Angularjs ng值不起作用
- ng模型在$(element).clone()之后不起作用
- AngularJS触发ng更改不起作用
- Angular js-ng选项不起作用
- Angular JS中的setInterval对HighCharts-ng不起作用
- 禁用Angular js ng不起作用