如何推送html元素

时间:2015-03-09 09:37:03

标签: angularjs

首先,我使用AngularJS v1.3.14
我尝试pushlabelinputbutton 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。

3 个答案:

答案 0 :(得分:0)

试试这个,你需要在数组中动态添加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

答案 1 :(得分:0)

按钮不在控制器范围内。在底部,您可以找到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

答案 2 :(得分:0)

最后我找到了解决方案:
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);
            };
        });
希望这有帮助。