AngularJS:有条件的NG-类的函数触发可笑的金额有条件、函数、金额、可笑

2023-09-04 01:21:20 作者:妖仙

我检查了类似的Q&放大器;至于,但他们并没有解决我的问题。

I checked similar Q&As but they didn't fix my issue.

我要动态地设置类的输入,请考虑以下 Plunkr

I want to dynamically set the class of an input, consider the following Plunkr.

正如你可以看到我有一个领域,像这样定义的:

As you can see I have one field, defined like this:

<input type="text" ng-model="Person.Name" ng-class="{'mandatory': IsFieldMandatory('Name')}" />

这有以下的code:

self.IsFieldMandatory = function(field){
  var isMandatory = true;

  var value = $scope.Person.Name;

  $scope.Cnt = $scope.Cnt + 1;

  return value.length == 0;
}

正如你所看到的,它会触发11(!)次页面加载(或类似模糊的任何进一步的行动)。

As you can see, it triggers 11(!) times on a page load (or any further action like blur).

PS:该功能不工作,因为我得到这个错误:

PS: The function does not work because I get this error:

Error: $rootScope:infdig Infinite $digest Loop

这是因为$ scope.Cnt增量。如果放在注释,它的工作原理(但当时我不知道触发器的数量)。

It occurs because of the $scope.Cnt increment. If put in comment, it works (but then I don't know the number of triggers).

PPS:

我如何使用这样的:

var value = $parse('Person.' + field);

这会更好,因为这样的功能将适用于任何领域。它需要,在现实世界中的场景。 (这将返回一个函数,而不是实际值的)

That would be better because then the function would work for any field. Which it needs to, in the real world scenario. (this returns a function, not an actual value)

THX!

更新

在Plunkr例子似乎并没有是有价值的,所以代替了原来的功能:

The Plunkr example doesn't seem to be valuable, so instead the original function:

self.IsMandatory = function (field) {

    console.log('test');

    if (self.IsMandatoryFieldsLoaded == true) {
        var idxAsync = self.MandatoryFields.indexOf(field);
        return idxAsync > -1;
    }

    return false;
}

正如你所看到的我没有做任何修改,只是读。我有11场,但这个功能的测试日志记录都写入198倍!

As you can see I don't do any modifications, just reads. I have 11 fields, yet this function's 'test' logging is written 198 times!

推荐答案

您可以简单地检查是否有什么类型的输入,像这样:

You can simply check if there is anything typed in the input like so:

<input type="text" ng-model="Person.Name" ng-class="{'mandatory': !Person.Name.length}" />

这样你摆脱你的错误。因为你在你的函数更新 Cnt的 $范围变量,消化周期触发了一遍又一遍。这引起了无限循环(错误你看到的)。

This way you get rid of your error. Because you were updating the Cnt $scope variable in your function, the digest cycle was triggered over and over again. That caused the infinite loop (the error you were seeing).

如果通过 Person.Name 只需勾选的长度,可以避免宣告一个新的功能和其他不必要的逻辑。它的简单和干净多了。

By simply checking if Person.Name has a length, you avoid declaring a new function and other unnecessary logic. It's simple and much cleaner.

希望这有助于。

使用更新ngForms:

您可以定义一个指令验证您的输入,像这样:

You can declare a directive for validating your input like so:

app.directive('validate', function() {
  return {
    restrict: 'A',
    require: 'ngModel',
    link: function(scope, elem, attr, ngModelCtrl) {
      scope.$watch('Person.Name', function(newValue) {
        ngModelCtrl.$setValidity('notEmpty', isEmpty(newValue))
      });
    }
  }
});

function isEmpty(string) {
  return !!string.length;
}

和使用它在你输入

<input type="text" validate ng-model="Person.Name"/>

和在你的CSS,你将有

and in your CSS you will have

input.ng-invalid {
  border: 2px solid red;
}

现在你可以delcare多少和复杂的验证功能,只需使用 $ setValiditity()函数角度讲,如果该输入是否有效。如果您的验证之一会变成假的,那么角度会自动把你的输入添加 NG-无效类红色。

Now you can delcare how many and complex validation functions and simply use the $setValiditity() function to tell Angular if that input is valid or not. If one of your validation will turn false, then Angular will automatically turn your input red by adding the ng-invalid class.