在嵌套重复中将项目推送到模型不会出现在视图

时间:2015-11-04 13:26:13

标签: angularjs

到目前为止,我已经做了一个小工作片来处理'笔记'。但现在我需要在运行时将项目添加到我的模型中。

这是我模型背后的JSON:

[
   {
  "DocId":"SomeGuid",
  "Items":[
     {
        "Content":"SomeContent",
        "Date":"SomeDate",
        "OrderBy":0,
        "Page":1,
        "Title":"SomeTitle"
     },
     {
        "Content":"SomeContent",
        "Date":"SomeDate",
        "OrderBy":0,
        "Page":2,
        "Title":"SomeTitle"
     }
  ]
},
{
  "DocId":"SomeGuid",
  "Items":[
     {
        "Content":"SomeContent",
        "Date":"SomeDate",
        "OrderBy":0,
        "Page":1,
        "Title":"SomeTitle"
     },
     {
        "Content":"SomeContent",
        "Date":"SomeDate",
        "OrderBy":0,
        "Page":2,
        "Title":"SomeTitle"
     }
  ]
}
]

我现在需要在其中一个.Items中添加一个新条目。

这是我的代码:

$scope.AddNode = function (docID, page) {
            var item;
            $scope.data.forEach(function(object) {
                if (object.DocId == docID) {
                    var newNode = { Content: "", Page: page, Title: "Neue Haftnotiz", Date: "16.19.05",Id: 0,Order:0,DocId:docID };
                         $scope.data[$scope.data.indexOf(object)].Items.push(newNode);
                    return;
                }
            });

(顺便说一句,有没有$ scope.data.FindByAttribute('docId',docID)? - 我在这方面找不到任何东西)

它会在我的数组中推送新项目,但不会更新我的视图。 你在这里看到结果:(黑色=旧,红色=推) Result

我的视图并不关心是否有新元素 - 这是模板:

        template: '<div class="root" >\
                                       <div class="group" id="{{groupId}}-{{$index}}" ng-repeat-start="doc in ngModel" sv-root sv-part="doc.Items">\
                                            <div class="groupHeader" ><h4 style="margin-bottom:0px;" >{{doc.DocId}}</h4></div>\
                                            <div class="note panel" ng-repeat="item in doc.Items"  sv-element>\
                                                <div class="header">\
                                                    <h5>\
                                                         <a ng-click="toggleCollapsedStates($parent.$index,$index)" class="anchor" href="#{{groupBaseId}}-{{$parent.$index}}-{{$index}}">{{item.Title}} - Seite: {{item.Page}}</a>\
                                                    </h5>\
                                                    <div class="button collapsed" id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}-expander"  ></div>\
                                                    <div id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}-menu" class="collapse">\
                                                        <input type="button" class="button delete" ng-click="deleteNode($parent.$index,$index)"/>\
                                                        <input type="button" class="button edit" ng-click="editNode($parent.$index,$index)" id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}-edit"/>\
                                                        <input type="button" class="button reference" ng-click="openReference($parent.$index,$index)"/>\
                                                    </div>\
                                                </div>\
                                                <div id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}" data-parent="#{{groupId}}-{{$parent.$index}}" class="collapse">\
                                                    <textarea class="area" maxlength="255" id="{{groupBaseId}}-{{$parent.$index}}-{{$index}}-textarea" readonly>{{item.Content}}</textarea>\
                                                </div>\
                                            </div>\
                                        </div>\
                                        <div ng-repeat-end></div>\
                                    </div>',

1 个答案:

答案 0 :(得分:0)

$ scope。$ apply()完成工作

答案太短了。