Question

如果在collection directive更新ng-model时更新template中的var GridTemplate = [ '<div>', '<div>', '<ul class="titles"><li ng-repeat="page in currentPage">{{page.title}}</li></ul>', '<div class="rowContent">', '<ul ng-repeat="(title,page) in currentPage">', '<li ng-repeat="element in page.key track by $index">', '<input type="text" name="" id="" ng-model="element" ng-blur="numSort( page, element )" /></li></ul></div>', '<div class="pageNavigator"><ul><li ng-repeat="page in slides"><a ng-href="">{{$index+1}}</a></li></ul></div>', '</div>', '</div>' ];？

这是我的情景：plunkr

我的模板：

return {
        scope: {
            "pages" : "=",
            "viewports":"=",
            "numsorter":"&arrangeBy",
            "model" :"=ngModel"
        },

        template :GridTemplate.join(''),
        link: function(  scope, element, attrs  ) {

            scope.slides = [], scope.currentPageNo = 0;

            scope.numSort = function(  titleToSort, element ) {
                var requiredTitle = titleToSort ? titleToSort.title : scope.slides[0][0].title;
                scope.slides[scope.currentPageNo].forEach( function( item, index ){
                    if( item.title == requiredTitle ){
                        console.log( scope.model ); //not getting updated model
                        item.key= $filter('orderBy')( item.key, '', false ); //once the model updated requried to sort it again
                        $timeout(function(){
                            scope.$apply();
                        })
                    }
                })
            }



        }
    }

我的指示：

geom_rect

Answer 1

由于ng-repeat创建了新的子范围，因此当您通过ng-model=value更改项目时，会创建范围内的新属性。而不是你的实际阵列发生了变化。

因此，将绑定更改为ng-model=slice[$index]以实际更新数组。

看到这个工作plunker，我将输入类型更改为number，将数据反映为数字。否则它将更新为字符串。

另一种更好的方法是 always have . in your model ，这意味着您可以创建分层范围对象。比如slice=[{item:95},...{}..]，

然后ng-repeat='sl in slice track by $index'>" 和绑定类似于ng-model="sl.item"

angularjs - 从`ng-model`更新`directive`集合

1 个答案: