Question

我已经使用模式实现了表单。表单可以有'创建'或'编辑'模式。根据不同的模式，它会在布局的另一个地方显示一些div。 Div内容是相同的，它是输入和验证消息。

这里是简化的例子。

查看：

<div ng-app="myApp"> 
    <div ng-controller="MyCtrl"> 
    <form name="editForm"> 
    <div ng-show='mode == "Edit"'> 
     <div class="form-group" ng-class="{true:'has-error',false:''}[editForm.FirstName.$valid === false && editForm.FirstName.$dirty]"> 
      <input type="text" ng-model="foo" ng-maxlength="5" name="foo" required /> 
      <div class="help-block" ng-messages="editForm.foo.$error" ng-if="editForm.foo.$dirty"> 
      <p ng-message="required">Required</p> 
      <p ng-message="maxlength">Too long</p> 
      </div> 
     </div> 
    </div> 
    <div ng-show='mode == "Create"'> 
     <div class="form-group" ng-class="{true:'has-error',false:''}[edit.foo.$valid === false && edit.foo.$dirty]"> 
      <input type="text" ng-model="foo" ng-maxlength="5" name="foo" required /> 
      <div class="help-block" ng-messages="editForm.foo.$error" ng-if="editForm.foo.$dirty"> 
      <p ng-message="required">Required</p> 
      <p ng-message="maxlength">Too long</p> 
      </div> 
     </div> 
    </div> 
    </form> 
     <div> 
     Mode: {{mode}} <br> 
     Value: {{foo}} <br> 
     Is form valid: {{editForm.foo.$valid}} <br> 
     </div> 
    </div> 
</div> 

控制器：

var myApp = angular.module('myApp',['ngMessages']); 

myApp.controller('MyCtrl',function($scope){ 
    $scope.mode = 'Edit'; 
}); 

Here's JSFiddle with working example。

问题是 - 验证消息只有在显示最后一个输入时才能正常工作。在编辑模式下 - 即使它相同 - 消息显示不正确。

Answer 1

而不是ng-show使用ng-if指令。

ng-show导致浏览器到ng-show表达式评估为false在元件上呈现两个div元素，具有ng-hide类。

ng-if另一方面导致div元素如果ng-if表达式为false则不会呈现。