AngularJS / Material - 当用户清除文本输入时重新显示 ng-message

Question

当我加载我的页面（下面的模板）时，ng-message 显示在所有文本输入和文本区域上，然后在我开始输入时每个输入消失。

当删除所有字符或只留下空格时（我trim）我想再次看到我的 ng-message 但它不见了。

如何在没有文本的输入上重新显示 ng-消息，就像它们在第一次加载页面时出现在每个输入元素下方一样？

控制器

angular.module('Action').config([
  '$stateProvider', 
  '$urlRouterProvider', 
  function($stateProvider, $urlRouterProvider) {

  }]).controller('CreateActionController', ['$http', '$resource', '$scope', '$window', '$state', '$timeout', function($http, $resource, $scope, $window, $state, $timeout){


        $scope.actionitem = {
            assignor: '', 
            dueDate: '',
            ecd: '',
            criticality: '',
            owner: '',
            altOwner: '',
            title: '',
            statement: '',
            closurecriteria: ''
        };

        $scope.users = {};
        $scope.usr = {};
        $scope.minDate = null;

        $scope.criticalitylevels = [];   

        $scope.getUsers = function(){
            return $scope.users;  
        };

        $scope.getMinDate = function(){  
            return $scope.minDate;
        }

        $scope.getCrticalities = function(){
            return $scope.criricalitylevels;
        }                       

        $scope.initUsers = function(){    
            return $http.get('api/users').then(function(response){
                $scope.users = response.data;
                return response.data;
            }); 
        } 

        $scope.submit = function(){
            alert(JSON.stringify($scope.actionitem));
            //$http.post('api/actionitem', )
        }

        $scope.today = new Date()

        this.dueDate = new Date();
        this.ecd = new Date();
        this.isOpen = false;

  }]).directive('initData', function(){
          return {
                restrict: 'E',
                link: function (scope, element, attrs) {

                      scope.initUsers();

                      scope.criticalitylevels = 
                      [
                          {'value': 1, 'level': 'High'},
                          {'value': 2, 'level': 'Med'},
                          {'value': 3, 'level': 'Low'},
                          {'value': 4, 'level': 'None'} 
                      ];
                }
          }
});

模板

<div layout-align="center center">
  <md-content ng-controller="CreateActionController" ng-init="init" layout-padding="" ng-cloak="">
    <init-data />
    <form name="CreateActionItem" role="form" ng-submit="CreateActionItem.$valid && submit()" novalidate>
      <div flex-gt-xs>
        <md-input-container>
          <label>Assignor</label>
          <md-select required placeholder="Assignor" ng-model="actionitem.assignor" style="min-width: 200px;">
            <md-option ng-value="$index" ng-model="actionitem.assignor" ng-repeat="user in users"
              ng-model-options="{trackBy: 'user.userid'}">{{user.name}}</md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container>
          <label>Original Due Date</label>
          <md-datepicker ng-model="actionitem.dueDate" md-min-date="today" md-placeholder="Enter date">
          </md-datepicker>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container>
          <label>ECD</label>
          <md-datepicker ng-model="actionitem.ecd" md-min-date="today" md-placeholder="Enter date">
          </md-datepicker>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="dropdown">
          <label>Criticality</label>
          <md-select required ng-model="actionitem.criticality" style="min-width: 200px">
            <md-option ng-repeat="criticality in criticalitylevels" ng-model-options="{trackBy: 'criticality.level'}"
              ng-value="criticality">
              {{criticality.level}}
            </md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="dropdown">
          <label>Owner</label>
          <md-select required placeholder="Owner" ng-model="actionitem.owner" style="min-width: 200px;">
            <md-option ng-value="$index" ng-model="owner" ng-repeat="user in users"
              ng-model-options="{trackBy: 'user.userid'}">{{user.name}}</md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="dropdown">
          <label>Alt Owner</label>
          <md-select required placeholder="Alt Owner" ng-model="actionitem.altowner" style="min-width: 200px;">
            <md-option ng-value="$index" ng-model="actionitem.altowner" ng-repeat="user in users"
              ng-model-options="{trackBy: 'user.userid'}">{{user.name}}</md-option>
          </md-select>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="text-input" flex="100">
          <label>Action Item Title</label>
          <input required name="title" ng-model="actionitem.title">
          <div ng-if="actionitem.title.trim() == ''" ng-messages="CreateAction.$submitted">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="textarea-input" flex="100">
          <label>Action Item Statement</label>
          <textarea required name="statement" ng-model="actionitem.statement" md-maxlength="255" rows="5"
            ></textarea>
          <div ng-if="actionitem.statement.trim() == ''" ng-messages="CreateAction.$submitted">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
      </div>
      <div flex-gt-xs>
        <md-input-container class="textarea-input" flex="100">
          <label>Closure Criteria</label>
          <textarea required name="closurecriteria" ng-model="actionitem.closurecriteria" md-maxlength="255" rows="5"
            ></textarea>
          <div ng-if="actionitem.closurecriteria.trim() == ''" ng-messages="CreateAction.$submitted">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
      </div>
      <md-divider></md-divider>
      <section layout="col" layout-sm="column" layout-align="center center" layout-wrap>
        <!--md-button class="md-raised">Button</md-button-->
        <md-button type="submit"  class="md-raised md-primary">Create Action Item</md-button>
        <!--md-button ng-disabled="true" class="md-raised md-primary">Disabled</md-button>
              <md-button class="md-raised md-warn">Warn</md-button>
              <div class="label">Raised</div-->
      </section>
    </form>
  </md-content>
</div>

Answer 1

在我的 ng-if 中使用 .length 的否定 (!) 而不是 == '' 解决了这个问题。

例子

我换了

ng-if="actionitem.closurecriteria.trim() == ''"

和

ng-if="!actionitem.closurecriteria.trim().length"

得到了想要的结果！

AngularJS / Material - 当用户清除文本输入时重新显示 ng-message

AngularJS / Material - Re-display ng-message when user clears text input

javascript

angularjs

angularjs-material