Question

我有两个数据数组，以树形式和它们之间的关系显示。

$scope.types=['odd','prime','square','even'];
$scope.items=['1','4','3','8'];

div ng-repeat =“项目中的项目| customFilter”＆gt;项目

和

div ng-repeat =“输入类型| customFilter”＆gt;输入

两者都以ng-repeat显示，并根据所选项目调整其他列表。例如：1被选中，state变为

$ scope.type = [ '的奇'， '的素'， '正方形'， '甚至']; $ scope.items = [ '的 1 '， '4'， '3'， '8'];

与{type 1}}项目相关的元素移到顶部。

同样，例如：偶数被选中，array变为

$ scope.type = [ '方'， '的甚至'， '奇'， '素']; $ scope.items = [ '的 4 '， '的 8 '， '1'， '3'];

页面上突出显示粗体元素。我在state中使用自定义filter来根据关系进行显示和排序。

我想要的是在它排序之后，相同的ng-repeat存储在原始数组中。现在，当我从state中选择一个元素时，$scope.items会返回原始$scope.types，因此页面上的列表会重新调整哪个看起来很糟糕。

Answer 1

通过ng-change或$ watch跟踪对集合的更改，并使用控制器中的$ filter服务获取过滤后的值并将其存储在同一个数组中。

示例演示：http://plnkr.co/edit/eW48QL2j30ZAKnwGzs3g?p=preview

<body ng-controller="MainCtrl">
    <select ng-model='opt1' ng-options='option for option in options1' ng-change='filter(options2, opt1)'></select>
    <select ng-model='opt2' ng-options='option for option in options2 | filter:opt1'></select>
    <button ng-click='clear()'>Clear</button>
  </body>

var app = angular.module（'plunker'，[]）;

app.controller('MainCtrl', function($scope, $filter) {
  $scope.options1 = ['A','C','J'];
  $scope.options2 = ['Andrew','Chris Martin', 'Jeeva'];
  $scope.filter = function(collection, value){
    $scope.newoptions2 = $filter('filter')(collection, value);
    console.log($scope.newoptions2);
    $scope.options2 = $scope.newoptions2;
    $scope.options1 = [value];
  };
  $scope.clear = function(){
    $scope.options1 = ['A','C','J'];
    $scope.options2 = ['Andrew','Chris Martin', 'Jeeva'];
  }
});

将'过滤器'替换为'customFilter'。如果这些有帮助，请告诉我。

在AngularJs中自定义筛选器后保存数组的状态

1 个答案: