AngularJS ng-repeat'没有结果'div可见性闪烁第二个按钮单击

Question

以下表单显示了提交数据的列表。在没有提交数据时，我试图显示没有结果。它工作正常。但是，当有数据可供列表时，当我点击时，“没有结果”会显示一秒钟。我尝试使用显示：无;但它不起作用。如何阻止它显示。

HTML

<form class="form-inline" name="myForm" > 
<div class="form-group" > 
    <label class="radio-inline"> 
    <input name="sampleinlineradio" value="3" type="radio" ng-model="radioption" 
       ng-required="!radioption"> MAIN 1</label> 
    <label class="radio-inline"> 
    <input name="sampleinlineradio" value="1" type="radio" ng-model="radioption" > 
     Main 2</label> 

<div ng-show="!radioption && buttonClicked">Please select one.</div> 
</div> 

<div class="form-group"> 
    <label ng-repeat="branch in branches"> 
    <input type="checkbox" name="selectedBranches[]" value="{{branch.value}}" 
      ng-model="branch.selected" ng-required="isOptionsRequired()" > 
    {{branch.name}}</label> 

<div ng-show="isOptionsRequired() && buttonClicked">Please select one.</div> 
</div> 

<div> 
<label class="searchlabel"> 
<input type="radio" name="searchradio1" value="showComponentSearch" ng-model="value" 
    ng-required="value == 'showComponentSearch'" > 
Search By Component</label> 
<input type="text" name="comptext" ng-model="search" id="tags" 
    ng-required = "value == 'showComponentSearch' && search == 'comptext'" > 

<div ng-show="value == 'showComponentSearch' && !search && buttonClicked">Please enter text before submit.</div> 

<div> 
<label class="searchlabel"> 
<input name="searchradio2" value="showDateRangeSearch" type="radio" ng-model="value" 
    ng-required="value == 'showDateRangeSearch'" > 
Search By Time</label> 
</div> </div> 
<div ng-show="!value && buttonClicked">Please select one search option.</div> 

<input type="button" ng-click="fetchresults()" value="submit" > 
</form> 

<div ng-show="buttonClicked"> 
    <table> <thead>.....</thead> 
     <tbody> 
     <tr ng-show="results.length!=0" ng-repeat="r in results"> 
     <td></td></tbody></table> 
</div> 

<div ng-show="buttonClickedAgain"> 
<span ng-show="results.length==0 ">No results.</span> 
</div> 

在控制器

$scope.fetchresults = function(){ 
    if($scope.searchSelectionValue == 'showComponentSearch') { 
     $scope.results = Result.query({main: $scope.radioption, branch: $scope.selection[0], 
      component:$scope.search }); 
    if($scope.search) { 
    $scope.buttonClickedAgain = true; 
     } 
    } 
$scope.buttonClicked = true; 
}; 

Answer 1

你可以试试下面的if语句前加上行$scope.buttonClickedAgain = false;。

$scope.fetchresults = function(){ 
     $scope.buttonClickedAgain = false; 
    if($scope.searchSelectionValue == 'showComponentSearch') { 
     Result.query({main: $scope.radioption, branch: $scope.selection[0], component: $scope.search }, function(results){ 
     $scope.results = results; 
     $scope.buttonClickedAgain = true; 
    }); 
    //if($scope.search) { 
    //$scope.buttonClickedAgain = true; 
     //} 
    } 
$scope.buttonClicked = true; 
}; 

您可以查看下面的代码片段，结果将在5秒后到达。但是当你点击按钮时，没有结果div立即隐藏。您可以尝试多次点击。如果它不能正常工作，那么由于其他代码问题会引发错误并检查您的浏览器控制台。

var app = angular.module('app', []); 
 
app.controller('TestController', function($scope, $timeout){ 
 
    $scope.fetchresults = function(){ 
 
    $scope.buttonClickedAgain = false; 
 
    if($scope.value == 'showComponentSearch') { 
 
     //$scope.results = Result.query({main: $scope.radioption, branch: $scope.selection[0], 
 
      // $scope.search }); 
 
     $scope.results = []; 
 
    $timeout(function() { 
 
    var rnd = Math.random(); 
 
    
 
     if(rnd >= 0.5) { 
 
     $scope.results = [{id: 1}, {id: 2}]; 
 
     } 
 
     
 
    //if($scope.search) { 
 
    $scope.buttonClickedAgain = true; 
 
     // } 
 
     
 
     }, 5000); 
 
    } 
 
$scope.buttonClicked = true; 
 
}; 
 
    
 
}); 
 

 
angular.bootstrap(document, ['app']);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-controller="TestController" > 
 
<form class="form-inline" name="myForm"> 
 
<div class="form-group" > 
 
    <label class="radio-inline"> 
 
    <input name="sampleinlineradio" value="3" type="radio" ng-model="radioption" 
 
       ng-required="!radioption"> MAIN 1</label> 
 
    <label class="radio-inline"> 
 
    <input name="sampleinlineradio" value="1" type="radio" ng-model="radioption" > 
 
     Main 2</label> 
 

 
<div ng-show="!radioption && buttonClicked">Please select one.</div> 
 
</div> 
 

 
<div class="form-group"> 
 
    <label ng-repeat="branch in branches"> 
 
    <input type="checkbox" name="selectedBranches[]" value="{{branch.value}}" 
 
      ng-model="branch.selected" ng-required="isOptionsRequired()" > 
 
    {{branch.name}}</label> 
 

 
<div ng-show="isOptionsRequired() && buttonClicked">Please select one.</div> 
 
</div> 
 

 
<div> 
 
<label class="searchlabel"> 
 
<input type="radio" name="searchradio1" value="showComponentSearch" ng-model="value" 
 
    ng-required="value == 'showComponentSearch'" > 
 
Search By Component</label> 
 
<input type="text" name="comptext" ng-model="search" id="tags" 
 
    ng-required = "value == 'showComponentSearch' && search == 'comptext'" > 
 

 
<div ng-show="value == 'showComponentSearch' && !search && buttonClicked">Please enter text before submit.</div> 
 

 
<div> 
 
<label class="searchlabel"> 
 
<input name="searchradio2" value="showDateRangeSearch" type="radio" ng-model="value" 
 
    ng-required="value == 'showDateRangeSearch'" > 
 
Search By Time</label> 
 
</div> </div> 
 
<div ng-show="!value && buttonClicked">Please select one search option.</div> 
 

 
<input type="button" ng-click="fetchresults()" value="submit" > 
 
</form> 
 

 
<div ng-show="buttonClicked"> 
 
    Records: 
 
    <table> <thead></thead> 
 
     <tbody> 
 
     <tr ng-show="results.length!=0" ng-repeat="r in results"> 
 
     <td>{{r.id}}</td></tbody></table> 
 
</div> 
 

 
<div ng-show="buttonClickedAgain"> 
 
<span ng-show="results.length==0 ">No results.</span> 
 
</div> 
 
    </div>

Answer 2

使用ng-if而不是ng-show的股利。 ng-if阻止呈现

<div ng-show="buttonClickedAgain"> <span ng-show="results.length==0 ">No results.</span> </div>