suchen

Heim >Web-Frontend >js-Tutorial >AngularJS generiert dynamisch die ID des Div

AngularJS generiert dynamisch die ID des Div

黄舟
黄舟Original
2017-03-25 16:12:041658Durchsuche

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>

AngularJS generiert dynamisch die ID des Div

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)

In Verbindung stehende Artikel

Mehr sehen