如何在 ng-repeat中通过 ng 模型创建过滤器

Question

我有这个代码

    <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-repeat 中按 ng 模型过滤列表，但遗憾的是我没有成功。我将非常感谢一些帮助。

这是例子 jsFiddle

Answer 1

试试这个

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>

Answer 2

像这样更改过滤器 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]">

演示

Answer 3

过滤器不适用于基于 Angular 1.x 的 Angular 1.x 中的 ng-repeat，基于 Angularjs 文档https://docs.angularjs.org/api/ng/directive/ngRepeat

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

*内置过滤器 orderBy 和过滤器不适用于对象，如果与对象一起使用会引发错误。

如果遇到这些限制中的任何一个，建议的解决方法是将对象转换为一个数组，该数组在将对象提供给 ngRepeat 之前按您喜欢的顺序排序。您可以使用过滤器(如 toArrayFilter(执行此操作，也可以自己在对象上实现$watch。

因此，一种解决方案可能是在与ng-repeat一起使用之前创建一个新的食物排序数组。 另一种解决方案可以使用 toArrayFilter 解决方案。

Answer 4

您需要首先将 showListFood 设置为 true 并更改过滤器语法看到这个 ： 小提琴

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

Answer 5

工作演示：

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>