AngularJS动态生成div的ID-js教程-PHP中文网

首页

web前端

js教程

AngularJS动态生成div的ID

黄舟

Mar 25, 2017 pm 04:12 PM

1、问题背景

给定一个数组对象，里面是p的id；循环生成p元素，并给id赋值

2、实现源码

<!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、实现结果

<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动态生成p的ID的内容，更多相关内容请关注PHP中文网（www.php.cn）！

AngularJS实现动态编译添加到dom中的方法

AngularJs 动态加载模块和依赖

AngularJS实现给动态生成的元素绑定事件的方法

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1653

CakePHP 教程

1413

Laravel 教程

1305

PHP教程

1251

C# 教程

1224

显示更多

Related knowledge

如何使用 PHP 实现动态生成二维码功能 Sep 05, 2023 pm 05:45 PM

如何使用PHP实现动态生成二维码功能二维码（QRCode）被广泛应用于各个领域，它可以存储大量信息且易于扫描。在网页应用中，我们经常需要动态生成二维码，以便为用户提供便捷的操作方式。本文将介绍如何使用PHP实现动态生成二维码的功能。一、安装和配置PHPQRCode库为了方便生成二维码，我们可以使用PHPQRCode库。首先，我们需要

如何使用 JavaScript 实现动态生成表格功能？ Oct 24, 2023 am 10:34 AM

如何使用JavaScript实现动态生成表格功能？在网页开发中，经常要使用表格来展示数据或者创建数据录入的表单。而使用JavaScript可以实现动态生成表格的功能，这样可以方便地根据数据的变化来动态更新表格内容。本文将通过具体的代码示例，详细介绍如何使用JavaScript实现动态生成表格的功能。一、HTML结构准备首先，在HTML中准备一个容器

2022年最新5款的angularjs教程从入门到精通 Jun 15, 2017 pm 05:50 PM

Javascript 是一个非常有个性的语言. 无论是从代码的组织, 还是代码的编程范式, 还是面向对象理论都独具一格. 而很早就在争论的Javascript 是不是面向对象语言这个问题, 显然已有答案. 但是, 即使 Javascript 叱咤风云二十年, 如果想要看懂 jQuery, Angularjs, 甚至是 React 等流行框架, 观看《黑马云课堂JavaScript 高级框架设计视频教程》就对了。

利用jQuery生成带行号的动态表格 Feb 26, 2024 pm 09:39 PM

jQuery技巧：动态生成表格并自动增加行号在web开发中，经常需要动态生成表格来展示数据。同时，为了让用户更方便地查看表格内容，我们还经常需要为表格添加行号。本文将介绍如何使用jQuery实现动态生成表格并自动增加行号的技巧。首先，我们需要一个简单的HTML结构，包含一个按钮用于触发动态生成表格的操作，以及一个空的元素用于放置生成的表

如何用PHP和XML实现动态生成的网页导航菜单 Jul 29, 2023 am 09:00 AM

如何用PHP和XML实现动态生成的网页导航菜单概述：在网页设计和开发中，导航菜单是一个非常重要的组成部分，它能够帮助用户快速定位到网站的各个页面并提供方便的导航功能。本文将介绍如何使用PHP和XML来实现动态生成的网页导航菜单，使网站的导航菜单更加灵活、易于维护。步骤一：创建XML文件首先，我们需要创建一个XML文件，用于存储网站的导航菜单数据。可以使用任何

如何使用Go语言中的模板函数实现Word文档的动态生成？ Jul 31, 2023 pm 09:21 PM

如何使用Go语言中的模板函数实现Word文档的动态生成？随着信息化时代的到来，动态生成Word文档成为了企业和个人处理文档的常见需求。而Go语言作为一门高效、简洁的编程语言，其内置的模板函数功能可以帮助我们快速实现动态生成Word文档的功能。本文将介绍如何使用Go语言中的模板函数实现Word文档的动态生成，并提供相关的代码示例。一、准备工作在开始之前，我们需

使用PHP和AngularJS搭建一个响应式网站，提供优质的用户体验 Jun 27, 2023 pm 07:37 PM

在如今信息时代，网站已经成为人们获取信息和交流的重要工具。一个响应式的网站能够适应各种设备，为用户提供优质的体验，成为了现代网站开发的热点。本篇文章将介绍如何使用PHP和AngularJS搭建一个响应式网站，从而提供优质的用户体验。PHP介绍PHP是一种开源的服务器端编程语言，非常适用于Web开发。PHP具有很多优点，如易于学习、跨平台、丰富的工具库、开发效

Vue框架下，如何实现动态生成的统计图表 Aug 18, 2023 pm 07:05 PM

Vue框架下，如何实现动态生成的统计图表在现代的Web应用开发中，数据可视化已经成为不可或缺的一部分。而统计图表则是其中的重要一环。Vue框架是一种流行的JavaScript框架，它提供了丰富的功能来构建交互性的用户界面。在Vue框架下，我们可以很方便地实现动态生成的统计图表。本文将介绍如何使用Vue框架和第三方图表库来实现这一功能。要实现动态生成的统计图表

See all articles

AngularJS动态生成div的ID

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题