Question

我希望在现场出现错误时显示该字段的工具提示。如果需要ng-message＆＃34;＆＃34;然后工具提示应该显示＆＃34;你没有输入字段＆＃34;当错误被清除时，工具提示不应显示任何内容。再次，如果ng-message是＆＃34; maxlength＆＃34;然后工具提示应显示＆＃34;你的字段太长＆＃34;。这是我plunk 的index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example - example-ngMessages-directive-production</title>


  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular-messages.js"></script>
  <script src="script.js"></script>


  <script type="text/javascript">
    angular.element(document.getElementsByTagName('head')).append(angular.element('<base href="' + window.location.pathname + '" />'));
  </script>
</head>
<body ng-app="ngMessagesExample">
  <form name="myForm">
  <label>
    Enter your name:
    <input type="text"
           name="myName"
           ng-model="name"

           ng-maxlength="5"
           required 
           data-toggle="tooltip" title="You did not enter a field!"
           />
  </label>
  <pre>myForm.myName.$error = {{ myForm.myName.$error | json }}</pre>

  <div ng-messages="myForm.myName.$error" style="color:red" role="alert">
    <div ng-message="required">You did not enter a field</div>

    <div ng-message="maxlength">Your field is too long</div>
  </div>
</form>
</body>
</html>

的script.js：

(function(angular) {
  'use strict';
angular.module('ngMessagesExample', ['ngMessages']);


})(window.angular);

知道如何添加工具提示吗？

Answer 1

我编辑了您的Plunker，如下所示：

在控制器中我修改了淋浴功能：

$scope.showerror = function() {
  console.log(myForm.myName);
  if ($scope.myForm.myName.$error) {
    if ($scope.myForm.myName.$error.required == true) {
      $scope.message = "You did not enter a field";
    } else if ($scope.myForm.myName.$error.maxlength == true) {
      $scope.message = "Your field is too long";
    }
  } else {
    $scope.message = "hi";
  }
};

希望这有帮助。

带有就地错误的ng-messages的工具提示

1 个答案: