Question

我对角js很新。我想在点击特定div时创建一个输入框。在这里，我需要在div上创建重复的元素。

<div><div ng-repeat ng-click="create();"></div><div>

最好的方法是什么？

Answer 1

Angular中的DOM操作是通过directives完成的（在此处有关于“创建操纵DOM的指令”的段落）

首先，请阅读这篇优秀的文章：How do i think in Angular if i have a jQuery background

Angular团队还提供了一个非常简洁的教程，绝对值得一看：http://docs.angularjs.org/tutorial

虽然一旦你将头脑包裹在概念中，使用Angular是非常容易和有趣的，但是潜入寒冷可能会非常困难。开始慢，不要尝试从头开始使用每个功能。阅读了很多。

我强烈建议egghead.io作为学习资源。视频教程有一口大小，易于观察和理解。适合初学者和中间人的好地方。从这里开始。

有些人用Angular做了很多好事。看看http://builtwith.angularjs.org/并查看一些源代码。

Answer 2

使用数组和ng-repeat来做到这一点。看看下面的代码。我将范围变量作为空数组创建。然后创建了一个函数来为该数组添加值。

app.controller('MainCtrl', function($scope) {
  $scope.inputFields = [];
  $scope.count = 0;
  $scope.addField = function(){
    $scope.inputFields.push({name:"inputText"+$scope.count++});
  }
});

我在这个数组中使用了ng-repeat。并在div的click事件上调用该函数。

<div ng-click="addField()">Click here to add</div>
<div ng-repeat="inputField in inputFields">
   <input type="text" name="inputField.name">
</div>

检查此工作link

更新 - 单击

时仅显示一个文本框

我创建了addField（），如下所示。

$scope.addField = function(){
  $scope.newTextField = "<input type='text' name='myTxt'>";
}

要在我的视图文件中呈现此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);
            }
        );
    };
});

然后在我的view.html文件中使用此指令

<body ng-controller="MainCtrl"> 
  <div ng-click="addField()">Click to Add</div>
  <div compile="newTextField"></div>
</body>

click here to view the working link

动态创建HTML元素

2 个答案:

更新 - 单击