在选择中选择要添加的字段并将其添加

Question

I have select with options of fields. I select the field I want to add. When I call a function, I add an object to the array. From this object you need to get the field. It turned out.

    $scope.addNewField = function(id, type) {
      console.log(type);
      if(type == "DD"){
        $scope.arrays.push({
                  "id":$scope.arrays.length + 1,
                  "parentId":id,
                  "type":"DD",
                  "images":[],
                  "text":[
                    {
                      "title":"",
                      "text":""
                    }
                  ],
                  "table":[]
                });

        $scope.indexarr = $scope.arrays.length - 1
              console.log($scope.arrays);

              var html='<div ng-click="selectedValue(value)">Value</div>',
                  el = document.getElementById('myID');

                  angular.element(el).append( $compile('<div class="form-group" dragula="bag-one"><label for="inputEmail3" class="col-sm-1 control-label">Название</label><div class="col-sm-10"><input type="text" class="form-control" ng-model="arrays[indexarr].text[0].text" name="title" placeholder="Название" required><p ng-show="userForm.name.$error.required && ( vm.formSubmitted || userForm.name.$touched)" class="help-block">Это обязательное поле.</p></div></div>')($scope) )


      }
      if(type == "TABLE"){
        $scope.arrays.push({
                  "id":3,
                  "parentId":id,
                  "type":"TABLE",
                  "images":[],
                  "text":[
                    {
                      "title":null,
                      "text":"Andrey For WebView"
                    }
                  ],
                  "table":[]
                });
                     $scope.indexarr = $scope.arrays.length - 1
              console.log($scope.arrays);

              var html='<div ng-click="selectedValue(value)">Value</div>',
                  el = document.getElementById('myID');

                  angular.element(el).append( $compile('<div class="form-group" dragula="bag-one"><label for="inputEmail3" class="col-sm-1 control-label">Название</label><div class="col-sm-10"><input type="text" class="form-control" ng-model="arrays[indexarr].text[0].text" name="title" placeholder="Название" required><p ng-show="userForm.name.$error.required && ( vm.formSubmitted || userForm.name.$touched)" class="help-block">Это обязательное поле.</p></div></div>')($scope) )


      }
}

HTML:

      <select ng-model="test"><option value="DD">DD</option><option value="TABLE">TABLE</option></select>
      <button type="button" ng-click="addNewField(1, test)">отправить</button>

I tried ng-repeat but it duplicates field ng-IF does not help.

Must be so:

-Select field

-Add field and add array in $scope.

Answer 1

I think, you are missing the element in your HTML to which you are trying to add the fields dynamically.

Try inserting below line somewhere in your HTML body and see if it works.

<div id="myID"></div>

Suggestion is based on below two lines from your code. Let me know how it goes.

el = document.getElementById('myID');
angular.element(el).append( $compile('<div class="form-group" dragula="bag-one"><label for="inputEmail3" class="col-sm-1 control-label">Название</label><div class="col-sm-10"><input type="text" class="form-control" ng-model="arrays[indexarr].text[0].text" name="title" placeholder="Название" required><p ng-show="userForm.name.$error.required && ( vm.formSubmitted || userForm.name.$touched)" class="help-block">Это обязательное поле.</p></div></div>')($scope) )

Answer 2

Thank you all. Solved the problem with the help of ng-switch

Example:

                  <div class="containter" dragula='"another-bag"' dragula-model='arrays'>

                <div ng-repeat="item in arrays" dragula='"bag-one"'>

                  <div ng-switch on="item.type" id="mySwitch">

                        <div ng-switch-when="DD" class="entry-photo">
                        <div class="form-group" >
                          <label for="inputEmail3" class="col-sm-1 control-label">Название</label>
                          <div class="col-sm-10">
                            <input type="text" class="form-control" ng-model="item.text[0].text" name="title" placeholder="Название" required>
                            <p ng-show="userForm.name.$error.required && ( vm.formSubmitted || userForm.name.$touched)" class="help-block">Это обязательное поле.</p>
                          </div>
                        </div>
                      </div>   


                      <div ng-switch-when="TABLE" class="entry-photo">
                        <div class="form-group">
                          <label for="inputEmail3" class="col-sm-1 control-label">Название</label>
                          <div class="col-sm-10">
                            <input type="text" class="form-control" ng-model="item.text[0].text" name="title" placeholder="Название" required>
                            <p ng-show="userForm.name.$error.required && ( vm.formSubmitted || userForm.name.$touched)" class="help-block">Это обязательное поле.</p>
                          </div>
                        </div>
                      </div> 


                  </div>

                  </div>
            </div>