Question

我试图让这些动态过滤器工作，我认为它几乎就在那里。看起来模型没有被传递回监视功能。我希望它至少可以使用第一组过滤器，但它不会。

我想要实现的是当用户从选择列表中选择一个选项并在输入框中设置一个值时，数据将被过滤。用户可以选择添加另一组过滤器，方法是单击＆＃34;添加字段＆＃34;按钮。如果用户完成了第二组过滤器，则会进一步过滤数据。

This是我到目前为止所得到的。如果只显示一个过滤器，那么它不应该起作用吗？

这是创建用户定义过滤器的代码。

<div data-ng-repeat="filter in filters">
  <select ng-model="filter.id">
    <option value="age">Age</option>
    <option value="customerId">CustomerID</option>
    <option value="productId">ProductID</option>
    <option value="name">Name</option>
  </select>
  <input type="text" ng-model="data.search[filter.id]">
  <button class="remove" ng-show="$last" ng-click="removeFilter()">-</button>

添加字段

我想我几乎就在那里，对分层范围有了更好的理解。我已经提到了一些教程和示例，但我还没有完成。我认为我的问题是我没有正确地传达模型。还是有点迷失了。任何进一步的提示/建议都会很棒。我想知道是否应该将我的一些代码从我的指令中的控制器移到resultsCtrl控制器中。真的不确定。

这个fiddle让我想到在我的模板中使用filter.id ng-repeat

这plnkr很有帮助。

我现在到了某个地方。 This plnkr显示它正常工作，我想要做的最后一件事就是当你删除过滤器时，它会自动更新搜索对象以删除相关的过滤器。

有关如何执行此操作的任何建议吗？

Answer 1

你违反了＆＃34;在ng-model＆＃34; 中总是有一个点的黄金法则。

为什么呢？因为对象有继承而基元没有。

ng-model="filterType"

正在由ng-repeat创建的子范围内定义。因为它是原始的，控制器中的父作用域无法看到它。但是，如果它是父级别可用的对象的属性，则将在父级和子级之间共享引用。

修复该错误后，您将遇到scope.search不是对象的错误，因此您的$ watch函数也会抛出异常。在主控制器中可以设置：

$scope.search ={};

了解分层范围如何在角度中起作用。在网络搜索和角度文档中可以找到很多东西

Answer 2

我最终解决了这个问题：）

指令：

angular.module('dynamicFiltersDirective', [])
.directive('dynamicFilters', function() {
  return {
    restrict: 'AE',  
    scope: {
             filtersArray: '=',
             searchObject: '='
    },

    link: function(scope) {

      scope.addFilter = function() {
        var newItemNo = scope.filtersArray.length+1;
        scope.filtersArray.push({'id':'filter'+newItemNo});
      };

      scope.removeFilter = function(option) {
        var lastItem = scope.filtersArray.length-1;
        scope.filtersArray.splice(lastItem);
        delete scope.searchObject[option];
      };    

      scope.updateFilters = function (model) {
        scope.searchObject[model];
      }

    },
    templateUrl: 'filtertemplate.html'
  }
});

控制器：

angular.module('app', ['dynamicFiltersDirective']).controller('resultsCtrl', function($scope){

$scope.filters = [{id: 'filter1'}];
$scope.search = {};

    $scope.persons = [{
      name: 'Jim',
        age: 21,
      customerId: 1,
      productId: 4
  },{
      name: 'Frank',
        age: 20,
      customerId: 2,
      productId: 4
  },{
      name: 'Bob',
        age: 20,
      customerId: 3,
      productId: 5
  },{
      name: 'Bill',
        age: 20,
      customerId: 3,
      productId: 5
  }];
});

模板：

<div data-ng-repeat="filter in filtersArray">
  <select ng-model="filter.id">
    <option value="age">Age</option>
    <option value="customerId">CustomerID</option>
    <option value="productId">ProductID</option>
    <option value="name">Name</option>
  </select>
  <input type="text" ng-model="searchObject[filter.id]" ng-change="updateFilters(searchObject[filter.id])">
  <button class="remove" ng-show="$last" ng-click="removeFilter(filter.id)">-</button>
</div>
<button class="addfields" ng-click="addFilter()">Add fields</button>

<div id="filtersDisplay">
  {{ filters }}
</div>

的index.html

<div ng-controller="resultsCtrl">
 <dynamic-filters filters-array="filters" search-object="search">    </dynamic-filters>
 <div ng-repeat="person in persons | filter: search">
   {{person.name}}
</div>

这是我的example plnkr

Angular：进一步的动态过滤问题

2 个答案: