AngularJS动态表单字段,添加了必需的属性

时间:2016-11-23 19:36:56

标签: javascript html angularjs

我正在尝试验证从后端提供给我的一些表单字段。如果该字段名称需要该属性,我希望能够添加必需的属性。这是我有html的一面:

      <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 个答案:

答案 0 :(得分:1)

属性中'@'的目的是什么?

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

目前为元素设置的ID在ID名称前面有'@',但是您正在寻找"#" + input.property并在其中添加'@'符号,"#@" + input.property将为您提供{{ 1}}错误。

您还需要在invalid中包含required属性的添加,以确保首先呈现DOM元素。

$timeout

以下是plnk的工作原理。