AngularJS dynamically generates the ID of the div
1. Problem background
Given an array object, which contains the id of p; loop to generate p elements and assign values to the id
2. Implementation source code
<!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. Implementation result
<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>
The above is the content of the ID of p dynamically generated by AngularJS. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!
Related articles:
AngularJS implements the method of dynamic compilation and adding to dom
AngularJs dynamic loading of modules and dependencies
AngularJS implements the method of binding events to dynamically generated elements
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to use PHP to dynamically generate QR codes
Sep 05, 2023 pm 05:45 PM
How to use PHP to dynamically generate QR codes. QR codes (QRCode) are widely used in various fields. They can store a large amount of information and are easy to scan. In web applications, we often need to dynamically generate QR codes to provide users with convenient operations. This article will introduce how to use PHP to dynamically generate QR codes. 1. Install and configure the PHPQRCode library. In order to facilitate the generation of QR codes, we can use the PHPQRCode library. First, we need
How to use JavaScript to dynamically generate tables?
Oct 24, 2023 am 10:34 AM
How to use JavaScript to dynamically generate tables? In web development, tables are often used to display data or create forms for data entry. Using JavaScript can realize the function of dynamically generating tables, so that the table contents can be dynamically updated according to changes in data. This article will introduce in detail how to use JavaScript to dynamically generate tables through specific code examples. 1. HTML structure preparation First, prepare a container in HTML
The latest 5 angularjs tutorials in 2022, from entry to mastery
Jun 15, 2017 pm 05:50 PM
Javascript is a very unique language. It is unique in terms of the organization of the code, the programming paradigm of the code, and the object-oriented theory. The issue of whether Javascript is an object-oriented language that has been debated for a long time has obviously been There is an answer. However, even though Javascript has been dominant for twenty years, if you want to understand popular frameworks such as jQuery, Angularjs, and even React, just watch the "Black Horse Cloud Classroom JavaScript Advanced Framework Design Video Tutorial".
Use jQuery to generate dynamic tables with row numbers
Feb 26, 2024 pm 09:39 PM
jQuery Tips: Dynamically Generate Tables and Automatically Add Row Numbers In web development, it is often necessary to dynamically generate tables to display data. At the same time, in order to make it easier for users to view the table content, we often need to add row numbers to the table. This article will introduce how to use jQuery to dynamically generate tables and automatically increase row numbers. First, we need a simple HTML structure, including a button to trigger the dynamic generation of the table, and an empty element to place the generated table
How to use template functions in Go language to dynamically generate Word documents?
Jul 31, 2023 pm 09:21 PM
How to use template functions in Go language to dynamically generate Word documents? With the advent of the information age, dynamically generating Word documents has become a common need for companies and individuals to process documents. As an efficient and concise programming language, Go language has built-in template functions that can help us quickly realize the function of dynamically generating Word documents. This article will introduce how to use template functions in the Go language to dynamically generate Word documents and provide relevant code examples. 1. Preparation Before starting, we need to
How to implement dynamically generated web navigation menu using PHP and XML
Jul 29, 2023 am 09:00 AM
Overview of how to use PHP and XML to implement dynamically generated web page navigation menu: In web design and development, the navigation menu is a very important component, which can help users quickly locate various pages of the website and provide convenient navigation functions. This article will introduce how to use PHP and XML to implement dynamically generated web navigation menus, making the website navigation menu more flexible and easier to maintain. Step 1: Create an XML file First, we need to create an XML file to store the navigation menu data of the website. Can use any
How to implement dynamically generated statistical charts under the Vue framework
Aug 18, 2023 pm 07:05 PM
How to implement dynamically generated statistical charts under the Vue framework. In modern web application development, data visualization has become an indispensable part. And statistical charts are an important part of it. The Vue framework is a popular JavaScript framework that provides rich features for building interactive user interfaces. Under the Vue framework, we can easily implement dynamically generated statistical charts. This article will introduce how to use the Vue framework and third-party chart libraries to achieve this function. To implement dynamically generated statistical charts
Use PHP and AngularJS to build a responsive website to provide a high-quality user experience
Jun 27, 2023 pm 07:37 PM
In today's information age, websites have become an important tool for people to obtain information and communicate. A responsive website can adapt to various devices and provide users with a high-quality experience, which has become a hot spot in modern website development. This article will introduce how to use PHP and AngularJS to build a responsive website to provide a high-quality user experience. Introduction to PHP PHP is an open source server-side programming language ideal for web development. PHP has many advantages, such as easy to learn, cross-platform, rich tool library, development efficiency
