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

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-model 过滤列表，但遗憾的是我没有成功。我会非常感谢一些帮助。

这是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]">

Demo

Answer 3

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

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

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

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

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

Answer 4

您最初需要将 showListFood 设置为 true 并更改过滤器语法 看到这个：fiddle

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