javascript - 使用 JavaScript 添加新的 AngularJS 变量

Question

我正在尝试使用 AngularJS 和 JavaScript 制作动态表单。目标是添加用户需要的输入数量，并将所有这些输入转换为 AngularJS 变量，并将其打印在正文上。所以我得到了代码:

$(function(){
   var number = 1;
   $('a.add').click(function(e){
      e.preventDefault();
      $('#this_div_contains_settings').append('<input type="text" name="example'+number+'" ng-model="example'+number+'" placeholder="Anything">');
      number++;
   });
   $('#this_div_contains_settings').on('click','a.design_button', function(e){
      e.preventDefault();
      $(this).parent().remove();
   });
});

此函数每次运行时都会在我的 DIV 上添加一个具有不同 ng-model 的 INPUT。

问题是，如果 {{example1}} 已经在我的 BODY 上，它就可以工作，如果我稍后用另一个函数添加它，它就不起作用。

我是 AngularJS 的新手，所以我不明白每次添加新变量或类似内容时是否需要“刷新”AngularJS。

任何帮助将不胜感激:)

Answer 1

使用 jQuery 是解决这个问题的错误方法。相反，您可以在 Controller 内部创建一个数组，用于保存所有这些输入的模型。

_{根据您定义/创建 Controller 的方式，$scope 可能会替换为 this}

$scope.examples = [];

接下来，创建一个函数，将新示例添加到数组中:

$scope.addExample = function () {
    $scope.examples.push("");
}

现在，在您的模板中，使用 ng-repeat 创建输入:

<div id="this_div_contains_settings">
    <input ng-repeat="example in examples" type="text" name="example" ng-model="example" placeholder="Anything">
</div>

并让“添加”按钮在点击时调用 addExample 函数:

<a class="add" ng-click="addExample()">Add Example</a>

最后，删除问题中包含的所有代码。

对于删除所有示例的 .design_button 来说，这也很简单:

<a class="design_button" ng-click="examples = []">remove all examples!</a>

通过相同的概念，您甚至可以消除对 addExample 函数的需求，但是我倾向于将逻辑保留在 Controller 中(嗯，实际上是在服务中，但这是另一个主题)，而不是将其放在模板中。