ngModel + ngList binding to array does not update view when model changes #1751

Activity

1. gonzaloruizdevilla

   added 2 commits that reference this issue on Apr 30, 2013

   fix(input): detect changes in array when its values are changed

   ...

   This issue will close once commit 26207db is merged into the 'master' branch.

   26207db

   fix(input,select): equality comparison is used to detect changes

   ...

   This issue will close once commit f2af60c is merged into the 'master' branch.

   f2af60c
2. btford

   closed this as completedon Aug 24, 2013
3. btford commented on Aug 24, 2013

   

   btford

   on Aug 24, 2013

   Contributor

   More actions

   As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

   Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

   Thanks!
4. danilsomsikov commented on Aug 26, 2013

   

   danilsomsikov

   on Aug 26, 2013

   ContributorAuthor

   More actions

   The issue hasn't been fixed in either version.
   See http://jsfiddle.net/fjQcu/8/ for 1.2.0-rc.1 and http://jsfiddle.net/fjQcu/9/ for 1.0.8
5. btford

   reopened this on Aug 26, 2013
6. gonzaloruizdevilla

   added 2 commits that reference this issue on Sep 4, 2013

   fix(rootScope): $watchCollection returns in oldCollection a copy of t…

   ...

   bf69ca0

   fix(input): ngList is updated when array model values are changed

   ...

   fc9171b
7. gonzaloruizdevilla

   added 2 commits that reference this issue on Jan 7, 2014

   fix(rootScope): $watchCollection returns in oldCollection a copy of t…

   ...

   767ee85

   fix(input): ngList is updated when array model values are changed

   ...

   091228f
8. lordfriend commented on Nov 1, 2014

   

   lordfriend

   on Nov 1, 2014

   More actions

   I also encounter this issue when using ng-model in my custom directive. It seems ngModelController using reference comparison leads the $render callback never being called when array is just an old reference but its content changes. angular v1.2.23
9. jamie-pate commented on Dec 10, 2014

   

   jamie-pate

   on Dec 10, 2014

   More actions

   Workaround:

   make a new directive, something like:

   function ngeModelCollection() {
       return {
           require: 'ngModel',
           link: function(scope, elem, attr, ctrl) {
               $scope.$watchCollection(attr.ngModel, function ngModelWatch(value, old) {
               if (!Array.isArray(value) || old !== value) {
                   return;
               }
       ///copypasta from ngModelWatch()
         var formatters = ctrl.$formatters,
             idx = formatters.length;
   
         ctrl.$modelValue = value;
         while(idx--) {
           value = formatters[idx](value);
         }
   
         if (ctrl.$viewValue !== value) {
           ctrl.$viewValue = value;
           ctrl.$render();
         }
       ////endcopypasta
   
           }//end link function
       }
   }
   
   

   (untested, may need tweaking)
10. Narretz

    added

    1.4-candidate

    on Dec 10, 2014
11. kapace commented on Dec 11, 2014

    

    kapace

    on Dec 11, 2014

    Contributor

    More actions

    👍 Just formatting Jamie's workaround

    function ngeModelCollection() {
        return {
            require: 'ngModel',
            link: function(scope, elem, attr, ctrl) {
                $scope.$watchCollection(attr.ngModel, function ngModelWatch(value, old) {
                    if (!Array.isArray(value) || old === value) {
                        return;
                    }
    
                    ///copypasta from ngModelWatch()
                    var formatters = ctrl.$formatters,
                        idx = formatters.length;
    
                    ctrl.$modelValue = value;
                    while (idx--) {
                        value = formatters[idx](value);
                    }
    
                    if (ctrl.$viewValue !== value) {
                        ctrl.$viewValue = value;
                        ctrl.$render();
                    }
                });
                ////endcopypasta
            }//end link function
        };
    }
12. Hotell commented on Feb 8, 2015

    

    Hotell

    on Feb 8, 2015

    Contributor

    More actions

    I've created this workaround via new directive.
    It's more performant than @jamie-pate solution , 'cause the $viewValue update is processed only on external $modelValue changes and only one $formatter ngList formatter is run and $modelValue is not reassigned(there is no reason to do that) inside listener function.

      angular.module('myApp')
        .directive('emNgList', emNgList)
        ;
    
        function emNgList(){
    
          return {
            restrict: 'A',
            require: 'ngModel',
            priority: 100, // this has to be eq or gt as ngList.priority to get ngList $formatter
            link: postLink
          };
    
          function postLink(scope, elem, attrs, ctrl){
    
              var ngListFormatter = getNgListFormatter(ctrl);
    
              var killMe = scope.$watchCollection(attrs.ngModel, function(modelValue){
    
                var newViewValue = ngListFormatter(modelValue);
    
                if(newViewValue !== ctrl.$viewValue){
    
                  ctrl.$viewValue = newViewValue;
                  ctrl.$render();
    
                }
    
              });
    
            scope.$on('$destroy',function(){ killMe(); });
    
          }
    
          function getNgListFormatter(ngModelCtrl){
    
            var formatters = ngModelCtrl.$formatters;
            var lastIdx = formatters.length - 1;
    
            return formatters[lastIdx];
          }
        }

    showcase:
    http://plnkr.co/edit/3ExCYEhmhAp1pL21ll3X?p=preview
13. Narretz

    self-assigned this

    on Sep 14, 2015
14. Narretz

    removed

    1.4-candidate

    on Sep 14, 2015
15. Narretz

    modified the milestones: 1.5.x - migration-facilitationThis milestone has been deleted, BacklogThis milestone has been deleted on Sep 14, 2015
16. Narretz

    modified the milestones: 1.5.x, BacklogThis milestone has been deleted on Apr 21, 2017