javascript - 如何在 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>