javascript - 如何在嵌套的 ng-repeat 中使动态绑定的 AngularJS 模型不会抛出错误，直到模型从其他地方提供数据？

Question

问题

jsFiddle 演示问题

http://jsfiddle.net/7sfaB/

我在使用 AngularJS 时遇到了一种情况，我正在使用包含列表结构的配置服务中的嵌套来构建一组嵌套<ul>使用。在这个嵌套中，我试图通过基于配置服务中的属性动态构建模型并绑定到输入字段来使用单个复杂模型对象。（例如）ng-repeatng-repeatng-repeatng-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);

});

Answer 1

问题（至少在您的Fiddle上）是您试图在data[category.id][item.id].notes没有任何一个的情况下绑定：

$scope.data存在或成为对象

不$scope.data[category.id]存在或不作为对象

并且没有$scope.data[category.id][item.id]存在和成为一个对象。

为了解决这个问题，从服务加载数据后，您需要遍历 $scope.data 并创建您想要的每个键作为对象。您可以执行以下操作（已验证并且有效）：

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] = {};
        });
    });
});