Angularjs ng-required呼叫功能

时间:2015-05-06 09:42:26

标签: javascript angularjs

有可能使所需的值取决于某些功能吗? 像这样的东西?我想这样做是因为我想将所需的属性更改为某些表单输入...

HTML:

Name: <input type="text" ng-model="user.name"  ng-required="isRequired('name')" />
Age: <input type="text" ng-model="user.age"  ng-required="isRequired('age')" />

JS:

$scope.isRequired(fieldName){
         $scope.requiredFields = [];
         //$scope.requiredFields = STUFF FROM SOME REST SERVICE
        for (i in requiredFields) {
           if (requiredFields[i] == fieldName){
                return true;
           }
        }
        return false;
    }

2 个答案:

答案 0 :(得分:3)

更新答案: 所以根据你更新的OP,你想要的肯定是可行的。你试图做的问题是ng-required没有执行函数的能力,它只读取一个布尔值。但是我们可以根据服务器的数据动态创建变量,自动将字段设置为必需字段:

Updated Plunker

<form>
  Name: <input type="text" ng-model="user.test"  ng-required="name" /><br/>
  <input type="text" ng-model="user.name"  ng-required="age" />
  <br/>
  <button type="submit">Submit</button>
</form>

请注意,我在ng-required属性中为每个输入添加了$ scope属性。现在我们可以动态创建$ scope属性并将其设置为true,如果我们的数据表明我们需要:

  $scope.isRequired = function(){
         $scope.requiredFields = [];
         $http.get('fields.json')
         .success(function(data){
           $scope.requiredFields = angular.fromJson(data);
            console.log($scope.requiredFields.required)
           for (i = 0; i < $scope.requiredFields.required.length; i++) {
           $scope[$scope.requiredFields.required[i]] = true
            }
            console.log($scope[$scope.requiredFields.required[0]]);
         })

         //$scope.requiredFields = STUFF FROM SOME REST SERVICE

    }
    $scope.isRequired()

因此,它迭代从服务器接收的必需字段数组,然后为每个所需字段动态创建$ scope属性,并将其设置为true。现在需要任何具有该范围内的$ scope属性的字段。任何不动态创建的东西都会返回false,并且不会触发ng-required。

原始答案:

Plunker

正如Pratik所提到的,ng-required只接受布尔值,但我们可以用函数切换它的值。

HTML

  <form>
    Name: <input type="text" ng-model="user.name"  ng-required="isRequired" />
    <br/><button ng-click="toggle()">Required: {{isRequired}}</button>
    <button type="submit">Submit</button>
  </form>

代码:

  $scope.isRequired = true;
  $scope.toggle = function() {
    $scope.isRequired = !$scope.isRequired;
  }

答案 1 :(得分:1)

我知道这已经有几年历史了,所以AngularJS可能已经改变了,但是今天所接受的答案是不正确的。您可以很容易地在ng-required中像it takes an expression那样执行一个函数,它可以是一个函数。例如:

index.html

<div ng-controller="ExampleController" class="expressions">
  Expression:
  <input type='text' ng-model="expr" size="80"/>
  <button ng-click="addExp(expr)">Evaluate</button>
  <ul>
   <li ng-repeat="expr in exprs track by $index">
     [ <a href="" ng-click="removeExp($index)">X</a> ]
     <code>{{expr}}</code> => <span ng-bind="$parent.$eval(expr)"></span>
    </li>
  </ul>
</div>

script.js

angular.module('expressionExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  var exprs = $scope.exprs = [];
  $scope.expr = '3*10|currency';
  $scope.addExp = function(expr) {
    exprs.push(expr);
  };

  $scope.removeExp = function(index) {
    exprs.splice(index, 1);
  };
}]);

script.js中,定义了一个函数addExp并将其添加到作用域,然后在ng-click标记的a伪指令中调用该函数,其中{{3 }}作为参数。

此代码直接来自also takes an expression。它不会直接使用ng-require,但是任何带有表达式的指令都可以使用。我使用相同的语法为ng-require使用函数。