Heim > Artikel > Web-Frontend > AngularJS generiert dynamisch die ID des Div
AngularJS generiert dynamisch die ID des Div
- 黄舟Original
- 2017-03-25 16:12:041557Durchsuche
1. Problemhintergrund
Gegeben sei ein Array-Objekt, das die ID von p enthält; Schleife zum Generieren von p-Elementen und Zuweisen von Werten zur ID
2. Implementierungsquellcode
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AngularJS动态生成p的ID</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("idApp",[]);
app.controller("idCon",function($scope){
$scope.pIds = [
{pId:"chartId1"},
{pId:"chartId2"},
{pId:"chartId3"},
{pId:"chartId4"},
{pId:"chartId5"}
];
});
</script>
</head>
<body ng-app="idApp" ng-controller="idCon">
<p ng-repeat="chart in pIds">
<p id="{{chart.pId}}">{{chart.pId}}</p>
</p>
</body>
</html>3. Implementierungsergebnis
<html><head><style type="text/css">@charset "UTF-8";
[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],
.ng-cloak,
.x-ng-cloak,
.ng-hide:not(.ng-hide-animate){
display:none !important;}ng\:form{display:block;}
.ng-animate-shim{visibility:hidden;}
.ng-anchor{position:absolute;}</style>
<meta charset="UTF-8">
<title>angularJS动态生成p的ID</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
var app = angular.module("idApp",[]);
app.controller("idCon",function($scope){
$scope.pIds = [
{pId:"chartId1"},
{pId:"chartId2"},
{pId:"chartId3"},
{pId:"chartId4"},
{pId:"chartId5"}
];
});
</script>
</head>
<body ng-controller="idCon" ng-app="idApp" class="ng-scope">
<!-- ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">
<p id="chartId1" class="ng-binding">chartId1</p>
</p><!-- end ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">
<p id="chartId2" class="ng-binding">chartId2</p>
</p><!-- end ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">
<p id="chartId3" class="ng-binding">chartId3</p>
</p><!-- end ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">
<p id="chartId4" class="ng-binding">chartId4</p>
</p><!-- end ngRepeat: chart in pIds --><p ng-repeat="chart in pIds" class="ng-scope">
<p id="chartId5" class="ng-binding">chartId5</p>
</p><!-- end ngRepeat: chart in pIds -->
</body></html>
Das Obige ist der Inhalt von AngularJS, der die ID von p dynamisch generiert. Weitere verwandte Inhalte finden Sie hier zur chinesischen PHP-Website (www.php.cn) !
Verwandte Artikel:
AngularJS implementiert die Methode der dynamischen Kompilierung und des Hinzufügens zu Dom
AngularJs lädt Module und Abhängigkeiten dynamisch
AngularJS implementiert die Methode zum Binden von Ereignissen an dynamisch generierte Elemente
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：AngularJS-Timer (Intervall)Nächster Artikel：AngularJS-Timer (Intervall)