Question

首先，我使用AngularJS v1.3.14
我尝试push：label，input，button html元素

这里是我的HTML代码：

<div class="container" ng-controller="ctrl" >
<div class="form-inline" ng-repeat="c in controls">
    <label class="control-label">Name:</label>
    <input class="form-control">
    <button class="btn btn-danger">X</button>
</div>
<button class="btn btn-primary" ng-click="add();">+</button>

和脚本代码：

 angular.module("app", [])
        .controller("ctrl", function ($scope) {
            $scope.controls=[];
            $scope.add = function () {
                $scope.controls.push({
                 ...
                })
            };
        });

我的问题是：我如何push div controls id。

Answer 1

试试这个，你需要在数组中动态添加html控件，然后使用ng-repeat

重新渲染数组的abject值

Html代码

  <div class="form-inline" ng-repeat="c in controls">

                        <div ng-bind-html="c.htmlValue | to_trusted"></div>
                    </div>
                    <button class="btn btn-primary" ng-click="add();">+</button>

Js Code

    angular.module("app", [])
            .controller("ctrl", function ($scope) {
                $scope.controls=[];
                $scope.add = function () {
        var stringValue="<label class=\'control-label\'>Name:</label><input class=\'form-control\'><button class=\'btn btn-danger\'>X</button>"
        $scope.controls.push({ "htmlValue": stringValue })
    };
            }).filter('to_trusted', ['$sce', function ($sce) {
    return function(text) {
        return $sce.trustAsHtml(text);
    };
}]);

请参阅

中的此工作代码

Plunker

演示图像

enter image description here

Answer 2

按钮不在控制器范围内。在底部，您可以找到PLNKR的链接，以证明其基本用途。

angular.module("app", [])
        .controller("ctrl", function ($scope) {
            $scope.controls=[];
            $scope.add = function () {
                $scope.controls.push('')
            };
        });

HTML：

  <body ng-app="app">
    <div ng-controller="ctrl" >
    <div class="container" >
<div class="form-inline" ng-repeat="c in controls">
    <label class="control-label">Name:</label>
    <input class="form-control" ng-model="c">
    <button class="btn btn-danger">X</button>
    </div>
</div>
<button class="btn btn-primary" ng-click="add();">+</button>
</div>
  </body>

Example

Answer 3

最后我找到了解决方案：
HTML：

<div class="container" ng-controller="ctrl">
<div class="form-inline" ng-repeat="todo in todos track by $index">
    <label class="control-label">Name:</label>
    <input type="text" class="form-control" ng-model="todos[$index]">
    <button class="btn btn-danger" ng-click="remove($index);">X</button>
</div>
<div class="form-inline">
    <button class="btn btn-primary" ng-click="add();">+</button>
</div>

脚本：

        angular.module('app', [])
        .controller('ctrl', function ($scope) {
            $scope.todos = [''];
            $scope.add = function () {
                $scope.todos.push({});
                console.log($scope.todos);
            };
            $scope.remove = function (index) {
                $scope.todos.splice(index, 1);
            };
        });

希望这有帮助。

如何推送html元素

3 个答案:

Html代码

Js Code

Plunker

演示图像