user3844782 user3844782 - 11 days ago 7
AngularJS Question

Angularjs hidden div visible when clicking

The following form shows a list of data on submit. I am trying to show no results found when there is no data on submit. It works okay. But when there is data available to list, "no results" shows up for a second when i click. I tried using display:none; but it did not work. How to stop it from showing.

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>


In Controller

$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;
};


Service

App.factory('Result', function($resource) {
return {
$resource('http://localhost:8080/system/results/:main/:branch/:component', {}, {

query: { method: 'GET',
params: {main:'@main', branch:'@branch', component: '@component' },
isArray: true }
})
};
});

Answer

You can try adding the line $scope.buttonClickedAgain = false; before the if statement as below.

$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;
};

You can check the below snippet where result will come after 5 seconds. But when you click the button, no results div hides immediately. You can try this with multiple clicks. If it does not work properly to you then its because of other code issue which throws error and check your browser console.

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>

Comments