angularjs - updating the `directive` collection from `ng-model`

Question

How to update the collection in directive while the ng-model updates in template?

here is my scenario: plunkr

my 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>'
            ];

my directive:

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();
                        })
                    }
                })
            }



        }
    }

Possible duplicate of [AngularJS - Create a directive that uses ng-model](http://stackoverflow.com/questions/14115701/angularjs-create-a-directive-that-uses-ng-model) — Ramesh Rajendran, May 19 '17 at 09:55
@RameshRajendran - can you help me to sort this issue? `http://plnkr.co/edit/btsvbZ7dglv9W0CvaO2p?p=preview` when i update something not reflects in array what i console — user2024080, May 19 '17 at 10:27

anoop · Accepted Answer · 2017-05-19T12:05:36.880

Since ng-repeat creates new child scope, so when you change item through ng-model=value, the new property inside scope is created. and not your actual array changed.

So change your binding to ng-model=slice[$index] to actually update the array.

See this working plunker, I changed the input type to number, to reflect data as number., else it will update as string.

Another better approach would be to always have . in your model , which means you can create hierarchical scope object. like slice=[{item:95},...{}..],

and then ng-repeat='sl in slice track by $index'>" and binding be like ng-model="sl.item"

angularjs - updating the `directive` collection from `ng-model`

1 Answers1