Выберите поле для добавления в выберите и добавьте его

Question

У меня есть выбор с параметрами полей. Я выбираю поле, которое хочу добавить. Когда я вызываю функцию, я добавляю объект в массив. Из этого объекта вам нужно получить поле. Оказалось.

    $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>

Я пробовал ng-repeat, но оно дублирует поле ng-IF, не помогает.

Должно быть так:

-Выберите поле

-Добавить поле и добавить массив в $ scope.

Answer 1

Спасибо всем. Решил проблему с помощью ng-switch

Пример:

                  <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>

Answer 2

Я думаю, вам не хватает элемента в HTML, к которому вы пытаетесь динамически добавлять поля.

Попробуйте вставить строку ниже в ваше тело HTML и посмотрите, работает ли она.

<div id="myID"></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) )