如何通过NG-模型NG重复创建过滤器

我有这样的代码如何通过NG-模型NG重复创建过滤器

<div class="form-group"> 
     <label for="inputFood" class="col-sm-2 col-form-label">Component</label> 
     <br> 
     <div class="col-sm-9 col-xs-9"> 
     <input type="text" class="form-control" name="inputFood{{ $index + 1}}" id="inputFood{{$index+1}}" required ng-model="foodForm.inputFood[$index+1]" placeholder="Type a component" autocomplete="off" ng-keyup="doCheck($index+1)"> 
     </div> 

    </div> 
    <br> 
    <div class="form-group col-xs-12"> 
     <ul ng-show="showListFood" class="foodList{{$index+1}}"> 
     <li ng-click="showFood(foodN.food_name, foodN.food_id)" ng-repeat="foodN in foodName| filter : foodForm.inputFood.$index+1"> 
      <span>{{ foodN.food_name}}</span> 
     </li> 
     </ul> 
    </div> 
    </fieldset>

我试图通过NG-模型NG重复过滤列表，但遗憾的是我不成功。我会非常感谢一些帮助。

这是示例jsFiddle

来源

2017-03-27 oded

变化这样 filter : foodForm.inputFood[$index+1]"

<li ng-click="showFood(foodN.food_name, foodN.food_id)" ng-repeat="foodN in foodName| filter : foodForm.inputFood[$index+1]">

Demo

来源

2017-03-27 05:40:17

过滤器尝试此

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

app.controller('foodCtrl', function($scope, $http) { 

     $scope.foodName = []; 
     $scope.foodForm = []; 
     $scope.foodsComponent = [{ 
      id: 'comp1', 
      inputFood: '' 
     }]; 


     $scope.foodName = [{ 
      "food_name": "egg" 
     }, { 
      "food_name": "bread" 
     }, { 
      "food_name": "apple" 
     }]; 


     $scope.showListFood = true; 
     $scope.isFood = false; 

     $scope.doCheck = function(index) { 

      $(function() { 

       if ($scope.foodForm.inputFood.index != "" &&  $scope.foodForm.inputFood.index != undefined) { 

        $scope.showListFood = true; 

       } else { 

        $scope.showListFood = false; 
        $scope.isFood = false; 
       } 

      }); 
     }; 


     $scope.addComponent = function() { 

      var newItemNo1 = $scope.foodsComponent.length + 1; 
      $scope.foodsComponent.push({ 
       id: 'comp' + newItemNo1, 
       inputFood: '' 
      }); 

     }; 
    }); 

</script>

 <button class="btn btn-primary" ng-click="addComponent()">ADD</button> 
     <div class="spacer"></div> 


     <div ng-repeat="comp in foodsComponent"> 
      <fieldset> 

       <div class="form-group"> 
        <label for="inputFood" class="col-sm-2 col-form-label">Component</label> 
        <br> 
        <div class="col-sm-9 col-xs-9"> 
         <input type="text" class="form-control" name="inputFood{{ $index + 1}}" id="inputFood{{$index+1}}" required ng-model="foodForm.inputFood[$index+1]" placeholder="Type a component" autocomplete="off" ng-keyup="doCheck($index+1)"> 
        </div> 
       </div> 
       <br> 
       <div class="form-group col-xs-12"> 
        <ul ng-show="showListFood" class="foodList{{$index+1}}"> 
         <li ng-click="showFood(foodN.food_name, foodN.food_id)" ng-repeat="foodN in foodName| filter : foodForm.inputFood[$index+1]"> 
          <span>{{ foodN.food_name}}</span> 
         </li> 
        </ul> 
       </div> 
      </fieldset> 
     </div> 
    </div> 

</div>

来源

2017-03-27 05:45:27

过滤器不会基于这个角1.x的NG-重复工作Angularjs DOC https://docs.angularjs.org/api/ng/directive/ngRepeat

请阅读上面的链接。我从ngRepeat链接复制了几段：

*内置过滤器orderBy和过滤器不能与对象一起使用，并且如果与一个对象一起使用，将会引发错误。

如果你打任何这些限制，建议的解决方法是将您的对象转换成被分在你将其提供给ngRepeat之前喜欢的顺序数组。你就可以像toArrayFilter这种滤波器做到这一点还是实现对象自己在$手表。*

所以，一个解决方案可能是你与NG-重复使用之前创建食品的一个新的有序数组。另一种解决方案可以用于ArrayFilter解决方案。

来源

2017-03-27 05:45:36 dowgwi

您需要showListFood设置为最初真实chnage过滤器语法看到这个：fiddle

(1) $scope.showListFood =true 
(2)ng-repeat="foodN in foodName| filter : foodForm.inputFood[$index+1]"

来源

2017-03-27 06:02:52 Jenny

这是对了一半。我需要将该列表隐藏起来，并通过相同的输入进行过滤。我已经检查了$ scope.foodForm.inputFood.index insted部分，我将其更改为$ scope.foodForm.inputFood [index]。 [的jsfiddle]（https://jsfiddle.net/odedtaizi/g88quyk1/17/）。但现在当我添加更多的输入，当我输入一个，所有列表都打开 – oded

所以你真的想要吗？ – Jenny

查看上面评论中的最后一个示例。我想我输入一个输入只有输入下的列表将显示过滤，而不是显示我所有的其他列表。 – oded

工作演示：

var myApp = angular.module('myApp',[]); 
 

 
myApp.controller('MyCtrl',function($scope) { 
 
    $scope.showListFood = true; 
 
    $scope.foodName = [ 
 
    { 
 
     "food_name": "alpha" 
 
    }, 
 
    { 
 
     "food_name": "beta" 
 
    } 
 
    ]; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp" ng-controller="MyCtrl"> 
 
     <div class="form-group"> 
 
     <label for="inputFood" class="col-sm-2 col-form-label">Component</label> 
 
     <br> 
 
     <div class="col-sm-9 col-xs-9"> 
 
     <input type="text" class="form-control" name="inputFood{{ $index + 1}}" id="inputFood{{$index+1}}" required ng-model="foodForm.inputFood" placeholder="Type a component" autocomplete="off" ng-keyup="doCheck($index+1)"> 
 
     </div> 
 

 
    </div> 
 
    <br> 
 
    <div class="form-group col-xs-12"> 
 
     <ul ng-show="showListFood" class="foodList{{$index+1}}"> 
 
     <li ng-repeat="foodN in foodName | filter : foodForm.inputFood"> 
 
      <span>{{ foodN.food_name}}</span> 
 
     </li> 
 
     </ul> 
 
    </div> 
 
</div>

来源

2017-03-27 10:38:57

如何通过NG-模型NG重复创建过滤器

回答

相关问题