AngularJS验证消息并在提交时显示没有结果和结果div问题

Question

以下表格显示了提交时的数据列表。当没有提交数据时，我试图显示未找到任何结果。我尝试如下所示，它显示和隐藏了 div。但是当表单上没有选择任何选项并单击提交按钮时，它会显示无结果 div。如何仅在表单验证成功且没有数据可显示时才显示无结果 div。

HTML

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

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

<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="buttonClicked"> 
<span ng-show="results.length==0 ">No results.</span> 
</div>

最小控制器代码

$scope.fetchresults = function(){
    $scope.results = Result.query({main: $scope.radioption, branch: $scope.selection[0], }); 
$scope.buttonClicked = true;
}

编辑： 我使用模型进行验证，并且 $valid 也可以正常工作，如下所示。但是出现了一些故障。如果我单击按钮，它不会显示 div。但在验证结束后，它会自动显示之前点击的“无结果”。如何阻止这种情况。虽然它列出了可用的数据，但它会显示“无结果”一秒钟左右

Answer 1

为您的表单命名

<form name="formName">

那你就可以了

ng-show="results.length==0 && formName.$valid"

Some more information on angularJS form validation

Answer 2

你可以查看下面的 sn-p，我已经用 $invalid、$pristine、$submitted 和 $valid 以角度方式更改了大部分。

您可以查看 Angular 文档以了解它们。

Link 1, Link 2

注意：您可以使用submit 按钮并摆脱ng-click 事件并改用ng-submit，因为不能在此sn-p 中使用，因为表单提交不是允许。使用submit 按钮时，请在form.$submitted = true; 行注释。

var app = angular.module('app', []);
app.controller('TestController', function($scope){
  $scope.isFieldInvalid = function(field) {
     var form = $scope.testForm;
     return form[field].$invalid && (!form[field].$pristine || form.$submitted);
  };
  
  $scope.fetchResults = function(){
    var form = $scope.testForm;
    form.$submitted = true;  // comment this line if button type="submit"
    if(form.$valid){
      $scope.searching = true;
    
      $scope.results = [];
    
      var rnd = Math.random();
    
      if(rnd >= 0.5) {
        $scope.results = [{id: 1}, {id: 2}];
      }
      
      //$scope.results = Result.query({main: $scope.radioption,        branch: $scope.selection[0], });
      
      $scope.buttonClicked = true;
      $scope.searching = false; 
      
    }
    
   };
  
});

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

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

 <div ng-show="isFieldInvalid('sampleinlineradio')">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>

<input type="button" value="submit" ng-click="fetchResults()" >

<div ng-show="buttonClicked && !searching">
    <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="buttonClicked && !searching"> 
<span ng-show="results.length==0 ">No results.</span> 
</div>
</form>