首先,我使用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。
答案 0 :(得分:0)
试试这个,你需要在数组中动态添加html控件,然后使用ng-repeat
<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>
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);
};
}]);
请参阅
中的此工作代码
答案 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>
答案 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);
};
});
希望这有帮助。