问题
jsFiddle 演示问题
我在使用 AngularJS 时遇到了一种情况,我正在使用包含列表结构的配置服务中的嵌套来构建一组嵌套<ul>
使用。在这个嵌套中,我试图通过基于配置服务中的属性动态构建模型并绑定到输入字段来使用单个复杂模型对象。(例如)ng-repeat
ng-repeat
ng-repeat
ng-model="data[category.id][item.id].notes"
这是 HTML 模板:
<ul>
<li id="{{category.id}}" ng-repeat="category in categoryConfig.categories">
<h3>{{category.title}}</h3>
<ul>
<li ng-repeat="item in category.items">
<p>{{item.title}} : Notes: <input type="text" ng-model="data[category.id][item.id].notes"/></p>
<p>{{data[category.id][item.id].notes}}</p>
</li>
</ul>
</li>
</ul>
我遇到的问题是,如果您尝试编辑列表中的文本字段,您将Cannot set property 'notes' of undefined
在控制台上收到错误消息。
有趣的是,如果您在 外部创建一个输入字段,该字段ng-repeat
具有定义为动态构建的相同绑定之一的显式模型,那么即使在动态构建的模型中,绑定也会开始工作。
<p>
Treasure Island Notes (dot syntax):<input type="text" ng-model="data.books.treasure_island.notes"/>
</p>
问题
设置动态绑定的 ng-models 以便立即绑定和可编辑而无需创建显式模型绑定的正确方法是什么?ng-repeat
我不确定在循环完成后是否需要调用某些东西以使其重新注册绑定。
提前感谢您提供的任何帮助。
以供参考
这是定义嵌套列表结构的配置服务:
var app = angular.module('testApp', []);
app.factory('configSvc', function(){
return {
categories: [
{
id: 'books',
title: 'Books',
items:[
{
id: 'treasure_island',
title: 'Treasure Island'
},
...
]
},
{
id: 'appliances',
title: 'Household Appliances',
items:[
{
id: 'toaster',
title: 'Toaster'
},
...
]
}
]
}
})
以及从服务中获取数据的控制器:
app.controller('MainCtrl', function ($scope, configSvc) {
$scope.categoryConfig = $.extend({}, configSvc);
});