Question

我正在尝试向div（输入的父级）添加has-error类，但是由于name来自php，所以我无法在树枝中访问输入的name而且那里不可用，所以我不能使用ng-class属性。

我有一个连接到该输入的指令，它可以检测ngModelCtrl.$invalid是对还是假，我正尝试从中添加类。

输入树枝：

<input type="text" ng-model="integerInputValue" integer-input 
       {{ block('widget_attributes') }}
       {% if value is not empty %}value="{{ value }}" {% endif %} />

指令：

(...)
      link: function (scope, element, attrs, ngModelCtrl) {
        // Workaround so that we don't lose the value.
        scope.integerInputValue = attrs.value;

        attrs.$set('ngPattern', '/^-?[0-9]+$/');

        function fromUser (text) {
          if (ngModelCtrl.$invalid) {
            angular.element(element).parent().addClass('has-error');
          } else if (ngModelCtrl.$valid) {
            angular.element(element).parent().removeClass('has-error');
          }
(...)

我试图在ngModelCtrl.$invalid函数内部检测fromUser是对还是假，该函数检测输入的每个字符，然后从那里添加或删除类。我也有ng-pattern，只允许[0-9]和“-”作为第一个字符。

之所以可行，是因为添加和删除了该类，但是，例如：

50-没有获得该类，50--得到该类，并且在删除时，50仍然具有该类，而5没有。

我想有一种更好的方法将类添加到父级。

Answer 1

如果我检查输入，它的名称为name="wizard_page_type[blocks][0][answers][0][value]"

要使用ng-class中的名称，请使用方括号属性访问器：

<form name='form1'>
    <input name="wizard_page_type[blocks][0][value]"
           ng-model="kk" required >
</form>

<div ng-class="{'has-error': form1['wizard_page_type[blocks][0][value]'].$invalid}">
</div>

ngModelController处理表单的最佳方法是使用合理的输入名称。在ngModelController注册时，ngFormController使用该名称。

表单在客户端AngularJS应用程序中的作用不同于传统的往返应用程序，浏览器最好不要将表单提交转换为将数据发送到服务器的整页重新加载。相反，AngularJS应用使用XHR来发布JSON数据，并以JSON数据的形式接收响应。

将类从指令添加到父元素

1 个答案: