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

它工作正常，在此間舉行的代碼snippet.Nothing改變。

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>