当我加载页面（下面的模板）时，ng-message会显示在所有文本输入和文本区域上，然后当我输入星号时每个输入都会消失。
当删除所有字符或仅保留空格（我修剪掉）时，我想再次看到我的ng-message，但它消失了。
如何在没有文本的输入上重新显示ng-message，就像它们在首次加载页面时出现在每个输入元素下方一样？
控制器
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>
答案 0 :(得分：0)
在我的.length中使用ng-if的否定（！）而不是== ''解决了该问题。
示例
我替换了
ng-if="actionitem.closurecriteria.trim() == ''"
与
ng-if="!actionitem.closurecriteria.trim().length"
并获得了预期的结果！