http://jsfiddle.net/7sfaB/
我有我在用,我要建一组嵌套AngularJS碰到一个情况< UL>使用
NG-重复
有一个嵌套的 NG-重复
从包含名单的结构配置服务。在该嵌套纳克重复
,我试图通过建立动态的基础上配置服务内属性的模型和绑定到输入字段使用单一的复杂的模型对象。 (例如 NG-模型=数据[category.id] [item.id] .notes
)
下面是HTML模板:
< UL> <李ID ={{category.id}}NG重复=,在categoryConfig.categories类别> < H3> {{category.title}}< / H3 GT&; < UL> <李NG重复=,在category.items项目> < P> {{item.title}}:注:其中;输入类型=文本NG模型=数据[category.id] [item.id] .notes/>< / P> &所述p为H.; {{数据[category.id] [item.id] .notes}}&下; / P> < /李> < / UL> < /李>< / UL>
这是我遇到的问题是,如果你试图在列表中编辑的文本字段中,您将获得无法设置属性上的注意未定义
错误控制台。
有趣的是,如果你的 NG-重复
已定义到了动态生成相同的绑定,一个明确的模型之外创建一个输入框,然后绑定开始工作即使在动态构建模型。
< P> 金银岛注(点语法):其中,INPUT TYPE =文本NG模型=data.books.treasure_island.notes/>&所述; / P>
什么是设置动态绑定的NG-模型的正确方法,使其立即约束,并编辑,而无需创建显式模型绑定?我不知道,如果有什么需要我打电话,使其重新注册绑定 NG-重复
循环完了之后。
在此先感谢您的帮助,您可以提供。
下面是定义嵌套列表的结构的配置服务
VAR应用= angular.module('testApp',[]);app.factory('configSvc',函数(){ 返回{ 类别: { ID:'书', 标题:图书, 项目: { ID:'treasure_island', 标题:金银岛 }, ... ] }, { ID:'家电', 标题:家用电器, 项目: { ID:烤面包机, 标题:烤面包机 }, ... ] } ] }})
和从该服务获取的数据控制器:
app.controller('MainCtrl',函数($范围,configSvc){ $ scope.categoryConfig = $ .extend({},configSvc);});
解决方案
这个问题(至少与你的小提琴的)是你想绑定到数据[类别.ID] [item.id] .notes
没有之一:
$ scope.data 现有的或正在对象
没有 $ scope.data [category.id]
现有的或正在对象
和无 $ scope.data [category.id] [item.id]
现有的和作为一个对象。
要解决这个问题,你从服务加载数据后,您可以通过$ scope.data需要循环,并在您希望每个键的对象。你可以做以下(验证和它的作品):
app.controller('MainCtrl',函数($范围,configSvc){ $ scope.data = {}; $ scope.categoryConfig = $ .extend({},configSvc); angular.forEach($ scope.categoryConfig.categories,功能(类){ $ scope.data [category.id] = {}; angular.forEach(category.items,函数(项目){ $ scope.data [category.id] [item.id] = {}; }); });});
http://jsfiddle.net/7sfaB/
I have a situation I've run into in using AngularJS where I'm building a set of nested <ul>
using ng-repeat
with a nested ng-repeat
from a config service that contains the structure of the lists. Within this nested ng-repeat
, I am attempting to use a single complex model object by building the model dynamically based on properties within the config service and binding to an input field. (e.g. ng-model="data[category.id][item.id].notes"
)
Here is the HTML template:
<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>
The problem that I'm experiencing is that if you try to edit the text field within the list, you will get Cannot set property 'notes' of undefined
error on the console.
Interestingly, if you create an input field outside of the ng-repeat
that has an explicit model defined to one of the same bindings that was built dynamically, then the binding starts working even within the dynamically built models.
<p>
Treasure Island Notes (dot syntax):<input type="text" ng-model="data.books.treasure_island.notes"/>
</p>
What is the proper way to setup dynamically bound ng-models so that it is immediately bound and editable without having to create explicit model bindings? I wasn't sure if there was something I needed to call to make it reregister the bindings after the ng-repeat
loops were finished.
Thanks in advance for any help you can provide.
Here is the config service that defines the structure of the nested lists:
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'
},
...
]
}
]
}
})
And the Controller which gets the data from the service:
app.controller('MainCtrl', function ($scope, configSvc) {
$scope.categoryConfig = $.extend({}, configSvc);
});
解决方案
The problem (at least with your Fiddle) is that you are trying to bind to data[category.id][item.id].notes
without either:
$scope.data
existing or being an object
without $scope.data[category.id]
existing or being an object
and without $scope.data[category.id][item.id]
existing and being an object.
To solve it, after you load your data from the service, you need to loop through $scope.data and create every key you want as an object. You can do the following (verified and it works):
app.controller('MainCtrl', function ($scope, configSvc) {
$scope.data = {};
$scope.categoryConfig = $.extend({}, configSvc);
angular.forEach($scope.categoryConfig.categories, function (category) {
$scope.data[category.id] = {};
angular.forEach(category.items, function (item) {
$scope.data[category.id][item.id] = {};
});
});
});