Question

以下表单显示了有关提交的数据列表。我想在没有提交数据的情况下显示没有找到结果。它工作正常。但是当有可供列出的数据时，＆＃34;没有结果＆＃34;点击时显示一秒钟。我尝试使用display：none;但它不起作用。如何阻止它显示。

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

您可以尝试在$scope.buttonClickedAgain = false;语句之前添加行if，如下所示。

$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立即隐藏。您可以通过多次点击来尝试此操作。如果它对您不起作用，则由于其他代码问题导致错误并检查您的浏览器控制台。

＆＃13;

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']);

＆＃13;

<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>

＆＃13;

Answer 2

在div上使用ng-if代替ng-show。 ng-if阻止div被渲染

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

AngularJS ng-repeat＆＃39;没有结果＆＃39;在第二个按钮单击时，div可见性闪烁

2 个答案: