gpt4 book ai didi

javascript - 如何在按钮单击时动态添加指令

转载 作者:行者123 更新时间:2023-11-28 00:35:51 25 4
gpt4 key购买 nike

我已经看过这篇相同主题的帖子: Dynamically add directive in AngularJS

但我对 Angular 还不够熟悉,无法在我的案例中使用这个解决方案。

在我的例子中,我尝试在单击按钮后动态地将指令(基于外部 html)添加到 div 中:

        <div class="charges" id="charges">
<my-headcharges></my-headCharges>
<my-charges></my-charges>

</div>

Nou 可以看到我的 div,其中包含我创建并放置在 div 硬编码下的两个指令。现在我想添加相同的指令,但要多次添加,并且是在单击按钮之后添加。

谢谢:)

最佳答案

您可以使用ng-repeat

var myApp = angular.module("myApp", []);
myApp.controller("myController", ["$scope",
function($scope) {
$scope.items = []
$scope.addTimes = function() {
$scope.items.push({
name : new Array(7).join().split(',').map(function(it){return String.fromCharCode(Math.floor(Math.random() * (122 - 97 + 1)) + 97)}).join("")
});
};
}
]);
<html ng-app="myApp">

<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>

<body ng-controller="myController">
<button ng-click="addTimes()">Add</button>
<div class="charges" ng-repeat="item in items">
<my-headcharges>Hello {{item.name}}</my-headCharges>
<my-charges></my-charges>
</div>
</body>

</html>

关于javascript - 如何在按钮单击时动态添加指令,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28505381/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com