當在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;
            }
        });
    }
});

它不能正常工作。 如果該值的長度為1或顯示了列表，它仍會顯示圖標。

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>

Answer 2

它在代碼段中可以正常工作。

 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.foodName = [{ name: 'test1' }, { name: 'test2' }, { name: 'test3' }]; $scope.showIcon = false; $scope.doCheck = function() { if ($scope.inputFood != "") { var sizeOfList = $("#foodList").find("li").length; if (sizeOfList == 0) { console.log("sizeOfList " + sizeOfList); $scope.showIcon = true; } } else { $scope.showIcon = false; } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="mainApp"> <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="atext" 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> </div>