2016-11-23 55 views
0

我想验证从后端给我的一些表单域。我希望能够添加必需的属性,如果该字段名称需要该属性。这里是我的html侧:AngularJS动态表单域添加必需的属性

 <div class="form-group"> 

     <!-- ************** ADDITIONAL DYNAMIC FIELDS ******** --> 

      <div ng-repeat="field in assetFields" ng-cloak> 
        <div class="col-sm-6"> 
        <input type="@{{field.element_type}}" name="@{{field.property}}" class="form-control input-lg" value="" id="@{{field.property}}"> 
       </div> 
     </div> 

这里是它Angularjs侧:

$http.get('/getAssetFeilds/'+$scope.assetType).success(function(data) 
      { 
       console.log(data); 
       $scope.assetFields = data; 

       //loop through the array of json objects 
       angular.forEach(data, function(input, key){ 
        //get the type of element 
        if(input.element_type == 'text'){ 
         //loop through input validations 
         angular.forEach(input.validations, function(value, key){ 
          //check if this input type field is required 
          if(value == 'required'){ 
           console.log("#"+input.property); 
           //find the element id value and add required attribute 
           angular.element("#"+input.property).attr('required', 'required'); 
          } 

         }); 
        } 
       }); 

      }); 

然而,它不添加属性,当我做检查的元素。这可能是什么原因,这不工作?我认为这会奏效。

回答

1

属性中'@'的用途是什么?

id="@{{field.property}}" 

目前正在设置的元素ID具有“@”的ID名称,但是你正在寻找"#" + input.property并添加“@”符号出现,"#@" + input.property会给你一个invalid错误之前。

您还需要将required属性添加到$timeout中以确保首先呈现DOM元素。

$timeout(function() { 
    angular.element("#" + input.property).attr('required', 'required'); 
}); 

这是一个plnk它的工作。

+0

'@'的用途是我使用laravel php框架,它为其刀片模板使用'{{}}'。 – ballerz

+0

好的,那么我假设你有'@ {{'设置使用'$ interpolateProvider'来使用Angular绑定,对吗?我更新了这个plnk以反映假设这就是你的意思。尝试在代码中的'$ timeout'中添加'required'属性,看看是否有效。 – machinehead115

+0

谢谢@ machinehead115,它的工作原理。 – ballerz