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

时间:2018-11-05 08:55:14

标签: javascript html arrays angularjs

我选择了带有字段选项的选项。我选择要添加的字段。调用函数时,将一个对象添加到数组中。从该对象中,您需要获取字段。原来。

    $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中添加数组。

2 个答案:

答案 0 :(得分:0)

我认为,您正在尝试动态添加字段的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) )

答案 1 :(得分:0)

谢谢大家。借助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>