用JavaScript添加新的AngularJS变量

Question

我正在尝试用AngularJS和JavaScript创建一个动态表单。目标是添加用户需要的输入，并在AngularJS变量中转换所有这些输入，并将其打印到body上。所以我得到了代码:

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

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

问题是，如果{{example1}}已经在我的身体上，如果我稍后用另一个函数添加它，它只是不起作用。

我是AngularJS的新手，所以我不明白每次添加新变量或类似的东西时是否需要"刷新"AngularJS。

任何帮助都会很感激:)

Answer 1

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

_{根据你如何定义/创建你的控制器，$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>

，让你的"add"按钮调用你的addExample函数点击:

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

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

对于删除所有示例的.design_button，这也很容易:

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

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