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

问题

jsFiddle 演示问题

http://jsfiddle.net/7sfaB/ http://jsfiddle.net/7sfaB/

我在使用 AngularJS 时遇到过一种情况，我正在构建一组嵌套的<ul> using 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-model 以便立即绑定和编辑而无需创建显式模型绑定的正确方法是什么？我不确定是否需要调用某些东西才能使其在之后重新注册绑定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);

});

问题（至少对于你的Fiddle）是你试图绑定到data[category.id][item.id].notes没有任何一个：

$scope.data存在或作为一个对象

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