AngularJS：动态创建元素

Question

如何在控制器中创建元素？例如点击事件？

示例控制器：

function AddCtrl($scope){

    $scope.add = function(){
         // do stuff to create a new element?
    }


}

示例视图：

<div ng-controller="AddCtrl">

    <button ng-click="add()">Add</button>
    // create <input type="text" ng-model="form.anotherField">

</div>

任何建议都非常感谢。

Answer 1

AngularJS旨在遵循MVC - 因此在视图中创建元素的控制器与MVC行为不一致。控制器不应该知道视图。

听起来好像你想根据一些条件逻辑出现一个控件。一种方法是绑定元素的可见性。

Answer 2

在Angular中，您的控制器不应该直接操作DOM。相反，您应该在模板中描述所需的元素，然后使用指令来控制它们的显示，例如ng-switch，ng-hide / ng-show或ng-if，基于模型 ，即你的数据。

例如，在您的控制器中，您可能会执行以下操作：

$scope.showForm = false;

然后在你的部分：

<div id="myForm" ng-show="showForm">
    <!-- Form goes here -->
</div>

通过在{true}和false之间切换$scope.showForm，您会看到 myForm div出现并消失。

Answer 3

如果您想根据某些条件或点击后显示元素，请使用ng-switch：http://docs.angularjs.org/api/ng/directive/ngSwitch

如果要添加多个元素，请创建重复的项目列表，并在单击按钮时将项目添加到视图模型中：

$scope.yourlistofitems = [];
$scope.add = function() {
     $scope.yourlistofitems.push("newitemid");
}

在HTML中：

<input type="text" ng-repeat="item in yourlistofitems" ng-model="item.property">

Answer 4

这是一个经典的错误，来自jQuery转移到Angular或任何其他MVC库。您应该考虑的方法是让视图对范围的变化做出反应。

$scope.items = []
$scope.add = function(){
     $scope.items.push({});
}

在视图中：

<input type="text" ng-repeat="item in items" ng-model="item.property">