Girdi alanı ngModel değerinde güncellenmiyor

Question

Bu nedenle, bir dizi dizeye girişi bağlayabilen bir Açısal yönerge oluşturdum. Ama bir öğeyi program aracılığıyla dizinden kaldırmaya çalıştığımda, model giriş alanına yansır. $ ModelValue da güncellenmez gibi görünüyor. Birisi açısal neden bu şekilde davrandığını açıklayabilir mi? Burada

<input array-model ng-model="inputList"> 
    <button type="button" ng-click="removeLastItem()"> 
    Remove last element from the list 
    </button> 


$scope.removeLastItem = function() { 
    $scope.inputList.pop(); 
}; 

bakınız keman: http://jsfiddle.net/r19mbv1r/

Answer 1

Bir pop işlevi değiştirilmiş bir etkinlik dizisi tetiklemez gibi görünüyor.

Görünüşe göre, $ formatters $WatchCollection değil $watch ilkesi üzerinde çalışır.

Bunu düzeltebiliriz. Başlangıcını üretmek için bir dizi öğesini her sildiğinizde.

Canlı örnek üzerinde jsfiddle.

angular.module('SomeApp', []) 
 
    .controller('SomeAppController', function($scope) { 
 
    $scope.inputList = []; 
 
    $scope.removeLastItem = function() { 
 
     $scope.inputList = $scope.inputList.slice(0,$scope.inputList.length-1); 
 
    }; 
 
    }) 
 
    .directive('arrayModel', function() { 
 
    return { 
 
     restrict: 'A', 
 
     require: 'ngModel', 
 
     link: function(scope, iElement, iAttrs, ngModel) { 
 

 
     ngModel.$formatters.push(function(modelValue) { 
 
      console.log("Inside formatters!",modelValue); 
 
      return modelValue.join(','); 
 
     }); 
 

 
     ngModel.$parsers.push(function(viewValue) { 
 
      console.log("Inisde parsers",viewValue); 
 
      return viewValue.split(','); 
 
     }); 
 
\t \t \t \t 
 
     } 
 
    }; 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="SomeApp" ng-controller="SomeAppController" class="container"> 
 
    <h4> 
 
    Input a comma separated string 
 
    </h4> 
 
    <input array-model ng-model="inputList"> 
 
    <br/> Input List is :{{inputList}}. 
 
    <br/> 
 
    <button type="button" ng-click="removeLastItem()"> 
 
    Remove last element from the list 
 
    </button> 
 
</div>

burada