动态创建HTML元素
[英]create HTML element dynamically
问题描述
I am very new to angular js. 
我对angular js非常陌生。 I want to create an input box on click of particular div. 我想在单击特定div时创建一个输入框。 Here I need to create element on div which repeating. 在这里，我需要在div上重复创建元素。
<div><div ng-repeat ng-click="create();"></div><div>
What will be the best way to do so? 最好的方法是什么？
2 个解决方案
解决方案1
3 2014-01-09 10:31:01
DOM manipulation in Angular is done via directives Angular中的DOM操作是通过指令完成的
(There is paragraph on 'Creating a Directive that Manipulates the DOM' here) （此处有关于“创建操纵DOM的指令”的段落）
First, read through this excellent article: How do i think in Angular if i have a jQuery background 首先，通读这篇出色的文章： 如果我有jQuery背景，我如何在Angular中思考
The Angular Team also provides a pretty neat tutorial, which definetly is worth a look: http://docs.angularjs.org/tutorial Angular团队还提供了一个非常简洁的教程，绝对值得一看： http : //docs.angularjs.org/tutorial
While Angular is pretty easy and fun to use once you have wrapped your head around the concepts, it can be quite overwhelming to dive into the cold. 当您将Angular围绕在概念上时，Angular非常容易使用并且很有趣，但是陷入寒冷可能会让人不知所措。 Start slow and do not try to use each and every feature from the beginning. 从慢开始，不要尝试从一开始就使用每个功能。 Read a lot. 经常阅读。
I strongly recommend egghead.io as a learning resource. 我强烈推荐egghead.io作为学习资源。 The video-tutorials there are bite-sized and easy to watch and understand. 那里的视频教程很小，易于观看和理解。 A great place for both beginners and intermediates. 对于初学者和中级者都是一个好地方。 Start from the bottom here. 从底部开始。
Some folks have done great things with Angular. 有些人在Angular方面做得很棒。 Take a look at http://builtwith.angularjs.org/ and check out some source code. 查看http://builtwith.angularjs.org/并查看一些源代码。
解决方案2
1 2014-01-09 11:12:49
Use an array and ng-repeat to do that. 使用数组和ng-repeat来做到这一点。 Have a look at the following code. 看下面的代码。 I crated scope variable as an empty array. 我将范围变量创建为一个空数组。 Then created a function to add values to that array. 然后创建一个函数以将值添加到该数组。
app.controller('MainCtrl', function($scope) {
$scope.inputFields = [];
$scope.count = 0;
$scope.addField = function(){
$scope.inputFields.push({name:"inputText"+$scope.count++});
}
});
I used ng-repeat with this array. 我在这个数组上使用了ng-repeat。 and called the function on the click event of a div. 并在div的click事件上调用了该函数。
<div ng-click="addField()">Click here to add</div>
<div ng-repeat="inputField in inputFields">
<input type="text" name="inputField.name">
</div>
Check this working link 检查此工作链接
Update - Show only one text box on click 更新-单击仅显示一个文本框
I created addField() as follows. 我如下创建addField（）。
$scope.addField = function(){
$scope.newTextField = "<input type='text' name='myTxt'>";
}
To render this html in my view file I created a new directive called compile as follows. 为了在我的视图文件中呈现此html，我创建了一个名为compile的新指令，如下所示。
app.directive('compile', function($compile) {
// directive factory creates a link function
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'compile' expression for changes
return scope.$eval(attrs.compile);
},
function(value) {
// when the 'compile' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
});
Then used this directive in my view.html file 然后在我的view.html文件中使用了此指令
<body ng-controller="MainCtrl">
<div ng-click="addField()">Click to Add</div>
<div compile="newTextField"></div>
</body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.