Question

我有一个带有卡片及其属性的JSON对象。我正在做的是创建一个搜索函数，它将根据用户在表单中做出的选择来解析JSON。

卡片的类型并不完全相同。有些人有其他人没有的属性。例如，人们可以拥有＆＃34;成本＆＃34;但另一方只是提供收入＆＃34;。

这是我的代码

        <ul>
             <li ng-repeat="card in cards
             | filter: { faction_name: searchHouse } 
             | filter: { name : searchTitle } 
             | filter: { text : searchText }
             | filter: { type_code : searchType }
             | filter: { cost : searchCost}
             | filter: { strength : searchStrength }
             | filter: { income : searchGold }
             | filter: { initiative : searchInitiative }
             | filter: { claim : searchClaim }
             | filter: { reserve : searchReserve }
             | limitTo: quantity 
             | orderBy: 'name' ">
             {{card.name}} - {{card.faction_name}}
            </li>
        <ul>

正如我所说，卡片可能没有相同的属性。所以如果我搜索＆＃34; gold＆＃34;选项

<input type="number" ng-model="searchGold" placeholder="Gold" min="0" class="form-control"/>

我无法再搜索其他没有特定属性的卡片。我想即使我从文本字段中删除了值，也会过滤掉一个空字符串。

我考虑了一些

filter: (hasGold || '') && cost : searchCost"

根据什么＆＃34; type_code＆＃34;将设置为true或false。我从早先的输入中得到了。

我不知道怎么做，并且代码有点乱，因为有很多过滤器没有进入控制器。

我唯一的控制器如下

app.controller('PageCtrl', function ($scope, cardsFactory) {

    Init();

    function Init(){
        console.log("Page Controller reporting for duty.");
        //$scope.data = {};
        cardsFactory.get().then(function(data) {
        $scope.cards = data;
        });

        $scope.houses=['Targaryen', 'Stark', 'Lannister', 'Martell', 'Greyjoy', 'Tyrell', 'The Night\'s Watch', 'Baratheon', 'Neutral'];
        $scope.types=['Character', 'Location', 'Event', 'Attachment', 'Plot']; 
        $scope.actions=['Military', 'Intrigue', 'Power'];
        $scope.quantity = 30;
    }

});

总而言之：我想从表单中获取某些输入。根据选择的内容，我想运行适当的过滤器。但是，某些过滤器只有在选择了某个输入时才能被触发。

如何在我的控制器中实现这样的逻辑？

更新是的，整件事已移入控制器，但问题仍然存在。我必须处理＆＃34;＆＃34;字段现在而不是被识别。

Answer 1

如果将所有过滤器标准移动到一个JSON对象下，例如：

$scope.myFilter = {
   searchHouse: '',
   searchTitle: '',
   searchText: ''
};

然后您可以创建自定义过滤器并将$ scope.myFilter对象作为参数传递

ng-repeat="card in cards | myMagicGoesHere:myFilter"

并过滤

.filter('myMagicGoesHere', function () {
  return function (items, myFilter) {
    var filtered = [];
    for (var i = 0; i < items.length; i++) {
      var item = items[i];
      // do some filtering magic
      if (magic is true) {
        filtered.push(item);
      }
    }
    return filtered;
  };
});

基于文本字段/选择输入的条件过滤 - AngularJS

1 个答案: