當ng-model輸入更新時ng-repeat不會更新

下面我有一個代碼示例，它將根據ng-repeat的模型屬性成功分組數據，但僅限於初始頁面加載。因此，例如在負載上，我做了 $scope.filter_items.group_1 = 'propb';，它正確地重複和按propb分組。如果我將其切換到propa，也是如此。當ng-model輸入更新時ng-repeat不會更新

問題是，頁面加載後，通過輸入更改filter_items模型對ng-repeat沒有任何影響，它不會更新。我試圖用。$ apply（）方法工作一下，但沒有任何工作（從我讀的東西我不應該使用它）。如何在模型輸入更改後重新繪製ng-repeat？

注意：我使用memoize函數來避免Angular digest錯誤，如果沒有它，將會發生。

http://plnkr.co/N41D2Y

<!DOCTYPE html> 
<html> 

    <head> 
    <script src="//code.angularjs.org/1.3.0/angular.js" data-semver="1.3.0" data-require="[email protected]*"></script> 
    <script data-require="[email protected]*" data-semver="1.6.0" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script> 
    <link rel="stylesheet" href="style.css" /> 
    <script src="script.js"></script> 
    <script> 
     var app = angular.module("MyApp", []); 

     app.controller('MyCtrl', function($scope) { 
     $scope.filter_items = {}; 
     $scope.filter_items.group_1 = 'propb'; 
     $scope.items = [{id:"1", propa:"one", propb:"uno"},{id:"2", propa:"one", propb:"tres"}] 
     return 
     }); 

     app.filter('myFilter', function() { 
      return _.memoize(function(items, filter_items) { 
        return _.groupBy(items, filter_items.group_1); 
       } 
     ); 
     });  
    </script> 
    </head> 

    <body ng-app="MyApp"> 
    <div ng-controller="MyCtrl"> 

     Group by<br> 
     <select ng-model="filter_items.group_1"> 
       <option value="propa">A</option> 
       <option value="propb">B</option> 
     </select> 

     <div ng-repeat="(group1, g_items) in items| myFilter:filter_items"> 
      <h2>{{group1}}</h2> 
     </div> 

    </div> 
    </body> 

</html>

來源

2014-10-20 Josh Diehl

我不能讓你的代碼工作還是那麼就只是我不明白或遺漏。但是如果自定義過濾器讓你頭疼，爲什麼不把簡單的分組功能放在你的控制器裏？

說，你的控制器

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

app.controller('MyCtrl', function($scope) { 
    $scope.items = [{ 
    id:1, 
    propa:"one", 
    propb:"uno" 
    },{ 
    id:2, 
    propa:"one", 
    propb:"uno" 
    },{ 
    id:3, 
    propa:"two", 
    propb:"dos" 
    },{ 
    id:4, 
    propa:"two", 
    propb:"dos" 
    }]; 

    $scope.notGrouped = angular.copy($scope.items); 
    $scope.options = ['propa','propb']; 

    $scope.groupBy = function (option) { 
    $scope.items = _.groupBy($scope.notGrouped, option); 
    } 
});

和相關HTML模板

<body ng-app="MyApp"> 
    <div ng-controller="MyCtrl"> 
    Group by<br> 
    <select ng-model="selectedOption" 
      ng-options="option as option for option in options" 
      ng-change="groupBy(selectedOption)"> 
    </select> 
    <br><br> 
    <div ng-hide="!!selectedOption">Not grouped yet...</div> 
    <div ng-repeat="item in items"> 
     <span>{{ item | json }}</span> 
    </div> 
    </div> 
</body>

會給你

imgur

來源

2014-10-21 07:00:16

當ng-model輸入更新時ng-repeat不會更新

回答

相關問題