AngularJS - 自定義過濾器，模型不會在視圖中更新

我有一個自定義過濾器設置，當用戶點擊複選框時觸發。我使用一個指令來渲染DOM元素，並在複選框上附加一個偵聽器，當點擊該複選框時，會觸發$scope上公開的filter函數。AngularJS - 自定義過濾器，模型不會在視圖中更新

在視圖中使用的$scope.model應該被過濾器函數的結果覆蓋，並且返回對象看起來不錯（例如console.log()），但視圖不會更新。我究竟做錯了什麼？

視圖：

<body ng-app="app"> 

<div ng-controller="mainCtrl"> 
    <div list-directive /> 
</div>

模板：

<script type="text/ng-template" id="list.html"> 
    <input type="checkbox" class="control"> 

    <div ng-repeat="player in model"> 
     Name: {{player.firstName}}, Price: {{player.price}} 
    </div> 
</script>

模塊和控制器：

var app = angular.module('app', []); 

app.controller('mainCtrl', ['$scope', '$filter', function($scope, $filter){ 
    $scope.model = [{ firstName: 'foo', price: 100 }, { firstName: 'bar', price: 50 }, { firstName: 'foobar', price: 0}]; 

    $scope.filter = function() { 
     $scope.model = $filter('listFilter')($scope.model); 
     console.log($scope.model); 
    } 
}]);

的指令：

app.directive('listDirective', function(){ 
    return { 
     restrict: 'AE', 
     templateUrl: 'list.html', 
     link: function($scope, iElm, iAttrs, controller) { 
      iElm.bind('click', function(e){ 
       var el = angular.element(e.target); 

       if (el.hasClass('control')) { 
        $scope.filter(); 
       }; 
      }); 
     } 
    }; 
});

和過濾器：

app.filter('listFilter', function(){ 
    return function(input) { 
     var results = []; 

     angular.forEach(input, function(val, key){ 
      if (val.price != 0) { 
       results.push(val); 
      } 
     }); 

     return results; 
    } 
});

來源

2014-04-11 Ozrix

-1

需要手動調用消化週期與$apply()，因爲我不上的元素聽ng-事件處理程序：

$scope.filter = function() { 
    $scope.model = $filter('listFilter')($scope.model); 
    $scope.$apply(); 
}

來源

2014-04-11 21:01:40 Ozrix

AngularJS - 自定義過濾器，模型不會在視圖中更新

回答

相關問題