Question

我想在angularjs中为div添加元素。所以写这段代码但不能正常工作。谢谢你的帮助:)）

function TestController($scope) {
$scope.addElement = function(){
    var myElements = angular.element(document.querySelector('#form'));
    console.log(myElements);
    if(myElements.length == 0)
     alert("Not Find");
    else
        myElements.prepend( myElements[0].children[1]);
}
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
    <input type="button" ng-click="addElement()" value="add"></input>
    <div id="div">
      <input type="text" name="name">
   </div>
</div>

Answer 1

如果我正确理解了你的问题，你想在每次ng-click时将一个输入元素附加到div？

你只需要使用jquery来定位div，然后用它附加元素。

参见示例：http://jsbin.com/seyawemijo/edit?html,js,output

Answer 2

这是我尝试过的。

$scope.addElement = function(){
    var myElements = angular.element(document.querySelector('#form'));
    console.log(myElements)

   console.log(myElements[0].children[1])
    if(myElements.length == 0)
     alert("Not Find");
    else{
        html = angular.element(myElements[0].children[1]).clone();  
        myElements.append( html);
    }

你应该使用角度克隆方法。

EDIT。

这是Plunker

Answer 3

通常情况下，当你想直接修改DOM时，有一种方法可以不用。

＆＃34;以角度思考＆＃34;

＆＃13;

function TestController($scope) {
  $scope.textArr = [];
  var count = 1;

  $scope.addElement = function() {
    var ele = {
      model: 'hello ' + count++
    }

    $scope.textArr.push(ele);
  }
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="TestController" id="form">
  <input type="button" ng-click="addElement()" value="add" />

  <div ng-repeat="text in textArr">
    <input type="text" ng-model="text.model">
  </div>

  <div>{{textArr}}</div>
</div>

＆＃13;

Answer 4

试试这个

   myElements.prepend(myElements[0].children[1].value);

Answer 5

我更改了上面的解决方案，将其他属性（包括id）添加到输入文本元素

var globalCntr = 0;
function TestController($scope) {
   $scope.addElement = function() {
        globalCntr ++;
        $('<input>',{
          type:'text',
          id:('inputText'+globalCntr)
       }).appendTo($('#target'));
   };
}

如何在angularjs中添加元素到div？

5 个答案: