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（＆＃39; myModule＆＃39;，[]）;

    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

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

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

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

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

因此，在使用ng-repeat之前，一个解决方案可能是创建一个新的Foods排序数组。另一个解决方案可能是使用theArrayFilter解决方案。

Answer 4

您需要首先将showListFood设置为true并使用chnage过滤器语法请参阅：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>

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

5 个答案: