如何将ng-show条件放在.js文件中的函数中

时间:2018-08-14 19:01:15

标签: javascript html angularjs

我正在尝试验证输入字母数字,最大长度为45且唯一的网页。这是代码。有什么办法可以将所有这三个ng-show条件放在我的controller.js中的一个函数中(类似于$ scope.showError()),而只能在此处ng-show中调用该函数

form name="addFieldForm"
        .w-100
          .pv3.w-100.w-two-thirds-ns
            label What type of field would you like to add to your input?
            select name="type" ng-model="field.type.value" ng-options="type.value as type.label for type in types" ng-change="valid('type')"
        .w-100
          .pv2.w-100.w-two-thirds-ns ng-if="field.type.value === 'input'" ng-class="{ 'b--red' : addFieldForm.lt.$touched && addFieldForm.lt.$error.required }"
            label.db Input
            input type="text" name="lt" ng-model="field.label.value" ng-maxLength="45" placeholder="Enter Input" ng-change="valid('label')" ng-pattern="/^[a-zA-Z0-9 -]*$/" required=""
          div ng-show="addFieldForm.lt.$touched"
            p.fw6.t-red.pt2.mb0 ng-show="addFieldForm.lt.$error.required || addFieldForm.lt.$error.maxlength" Input is required and must not exceed 45 characters.
            p.fw6.t-red.pt2.mb0 ng-show="!addFieldForm.lt.$error.required && !addFieldForm.lt.$error.maxlength && addFieldForm.lt.$error.pattern" Input is invalid.
            p.fw6.t-red.pt2.mb0 ng-show="!addFieldForm.lt.$error.required && !addFieldForm.lt.$error.maxlength && !addFieldForm.lt.$error.pattern" ng-if="!validate" Input needs to be unique.

1 个答案:

答案 0 :(得分:1)

您可以进行以下操作。在JS中创建一个函数,然后在QuerySets中调用该函数。

IN JS

ng-change="showError()"

视图中::

$scope.showError() {

    if ($scope.addFieldForm.lt.$error.required || $scope.addFieldForm.lt.$error.maxlength) {

        $scope.inputIsRequired = true;

    }

if (!$scope.addFieldForm.lt.$error.required && !$scope.addFieldForm.lt.$error.maxlength && $scope.addFieldForm.lt.$error.pattern) {

        $scope.InputIsInvalid = true;

    }

if (!$scope.addFieldForm.lt.$error.required && !$scope.addFieldForm.lt.$error.maxlength && !$scope.addFieldForm.lt.$error.pattern && !validate) {

        $scope.InputIsUnique = true;

    }