Я хочу добавить элемент в 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>
Вот что я пробовал.
$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
Часто, когда вы хотите изменить 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>
Если я правильно понял ваш вопрос, вы хотите добавить элемент ввода в div для каждого ng-click?
Вам просто нужно настроить таргетинг на div с помощью jquery и добавить элемент с ним.
См. Пример: http://jsbin.com/seyawemijo/edit?html,js,output
Я изменил вышеупомянутое решение, чтобы добавить другие атрибуты (включая id) во входной текстовый элемент
var globalCntr = 0;
function TestController($scope) {
$scope.addElement = function() {
globalCntr ++;
$('<input>',{
type:'text',
id:('inputText'+globalCntr)
}).appendTo($('#target'));
};
}
Попробуй это
myElements.prepend(myElements[0].children[1].value);