Как добавить элемент в div в angularjs?

Question

Как добавить элемент в div в angularjs?

0

Я хочу добавить элемент в div в angularjs. поэтому напишите этот код, но не сработайте правильно. Спасибо за вашу помощь :)

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>

ali 30 июнь 2015, в 08:00

Источник

Теги:

javascript

html

angularjs

5 ответов

1

Часто, когда вы хотите изменить DOM напрямую, есть способ сделать это без него.

"Думая угловато"

function TestController($scope) {
  $scope.textArr = [];
  var count = 1;

  $scope.addElement = function() {
    var ele = {
      model: 'hello ' + count++
    }

    $scope.textArr.push(ele);
  }
}

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

Icycool 30 июнь 2015, в 05:50

1

Если я правильно понял ваш вопрос, вы хотите добавить элемент ввода в div для каждого ng-click?

Вам просто нужно настроить таргетинг на div с помощью jquery и добавить элемент с ним.

См. Пример: http://jsbin.com/seyawemijo/edit?html,js,output

timeiscoffee 30 июнь 2015, в 03:58

0

Спасибо за ваш ответ. Я хочу добавить элемент по идентификатору. потому что моя форма может быть сложной.
ali 30 июнь 2015, в 05:55
1

@HJZ Я обновил пример, чтобы установить идентификатор для ввода текста в приложении.
timeiscoffee 30 июнь 2015, в 06:07

0

Я изменил вышеупомянутое решение, чтобы добавить другие атрибуты (включая id) во входной текстовый элемент

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

Pruthviraj 30 июнь 2015, в 03:53

0

Попробуй это

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

Sreejith 30 июнь 2015, в 03:31

Ещё вопросы

Спасибо за ваш ответ. Я хочу добавить элемент по идентификатору. потому что моя форма может быть сложной.
@HJZ Я обновил пример, чтобы установить идентификатор для ввода текста в приложении.

RIYAJ KHAN · Accepted Answer · 2015-06-30T03-05-00.000Z

Вот что я пробовал.

$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);
    }

Вы должны использовать метод углового клонирования.

РЕДАКТИРОВАТЬ.

Здесь это Plunker

большое спасибо. это работает правильно.