角：进一步动态过滤的问题 [英] Angular: further dynamic filtering issue

问题描述

我试图让这些动态过滤器工作，其几乎没有，我认为。看起来像模型不被传递回手表功能。我会一直期待它与第一组的至少过滤器来工作，但事实并非如此。

I'm trying to get these dynamic filters working and its almost there I think. Looks like the model isn't being passed back to the watch function. I would've expected it to work with the first set of filters at least but it doesn't.

我想要实现的是，当用户从选择列表中的一个选项，并在输入框中设置一个值过滤的数据。用户可以通过点击添加字段按钮，选择添加另一组的过滤器。如果用户完成了第二组过滤器然后将数据进一步过滤

What I'm trying to achieve is that when the user selects an option from the select list and sets a value in the input box the data is filtered. The user can optionally add another set of filters by clicking the "add fields" button. If there user completes the second set of filters then the data is filtered further.

这就是我这么远。如果有显示那么不应该只是工作只有一个过滤器？

This is what I've got so far. If there's only one filter showing then shouldn't it just work?

这是code，创建用户定义的过滤器。

This is the code that creates the user defined filters.

<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>

   将字段添加

Add fields

我觉得我几乎没有，有了进一步的认识层次范围。我已经提到了一些教程和例子，但我还没有应用。我觉得我的这个问题是我不正常通信的机型。还是有点失去了与此有关。任何进一步的提示/建议将是巨大的。我不知道我是否应该从控制器在我的指令到 resultsCtrl 控制器还可以将一些他的code。真的不知道。

I think I'm almost there, got a better understanding of hierarchical scope. I've referred to a few tutorial and examples but I'm not quite there yet. I think my issue with this is that I'm not communicating the models properly. Still a little bit lost with this. Any further tips/suggestions would be great. I'm wondering if I should move some of he code from the controller in my directive into the resultsCtrl controller. Really not sure.

这小提琴给我的主意，用 filter.id 我的模板中 NG-重复

This fiddle gave me the idea to use filter.id within my template ng-repeat

这 plnkr 是有益的。

我现在取得了一些进展。 这plnkr 显示它的工作，我想用它做的最后一件事是当你删除一个过滤器，它会自动更新搜索对象，取消其相应的过滤器。

I'm getting somewhere now. This plnkr shows it working, the last thing I want to do with it is when you remove a filter it automatically updates the search object to remove the relevant filter.

这是如何做到这一点有什么建议？

Any suggestions on how to do this?

推荐答案

我最终得到了这个解决：）

I eventually got this solved :)

指令：

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的

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>

下面是我的例如plnkr

这篇关于角：进一步动态过滤的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！