javascript - 当 AngularJS 列表中找不到输入值时如何显示元素？

Question

我创建了搜索输入来搜索列表中的某些项目。我希望如果项目搜索不在列表内，则可以像 html 代码中那样显示添加按钮:

<div ng-controller="foodCtrl">
    <form>
        <div class="form-group row foodGroupp" >
            <label for="inputFood" class="col-sm-2 col-form-label">food</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputFood" ng-model="inputFood" placeholder="Write some food"  ng-keyup="doCheck()">
            </div>
            <span id="addIcon" ng-show="showIcon">
                <button class="btn btn-default">+</button>
            </span>
            <ul ng-show="inputFood" id="foodList">
                <li ng-repeat="foodN in foodName | filter : inputFood">
                        <span>{{ foodN.name}}</span>
                </li>
            </ul>
        </div>


        <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
                <button type="submit" class="btn btn-primary">הוסף</button>
            </div>
        </div>
    </form>
 </div>

JavaScript 代码如下所示:

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

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

    $scope.foods = [];
    $scope.foodName = [];

    $http.get('/files/foodName.json')
    .success(function(response){
        $scope.foodName = response;
    });

    $scope.showIcon = false;

    $scope.doCheck = function(){
        $(function () {
            if($scope.inputFood != ""){
                var sizeOfList = $("#foodList").find("li").length;

                if(sizeOfList == 0){
                    console.log("sizeOfList " +sizeOfList);
                    $scope.showIcon = true;
                }

            }else{
                $scope.showIcon = false;
            }
        });
    }
});

它无法正常工作。如果值的长度为一或显示列表，它仍然显示图标。

Answer 1

您可以根据您的过滤数据直接显示您的按钮。

HTML 代码

<div ng-controller="foodCtrl">
    <form>
        <div class="form-group row foodGroupp" >
            <label for="inputFood" class="col-sm-2 col-form-label">food</label>
            <div class="col-sm-10">
                <input type="text" class="form-control" id="inputFood" ng-model="inputFood" placeholder="Write some food"  ng-keyup="doCheck()">
            </div>
            <span id="addIcon" ng-hide="(foodName|filter:inputFood).length > 0">
                <button class="btn btn-default">+</button>
            </span>
            <ul ng-show="inputFood" id="foodList">
                <li ng-repeat="foodN in foodName | filter : inputFood">
                        <span>{{ foodN.name}}</span>
                </li>
            </ul>
        </div>


        <div class="form-group row">
            <div class="offset-sm-2 col-sm-10">
                <button type="submit" class="btn btn-primary">הוסף</button>
            </div>
        </div>
    </form>
 </div>