AngularJS动态生成div的ID

原创 2016年08月28日 21:50:42

1、问题背景

     给定一个数组对象,里面是div的id;循环生成div元素,并给id赋值


2、实现源码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>AngularJS动态生成div的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.divIds = [
					{divId:"chartId1"},
					{divId:"chartId2"},
					{divId:"chartId3"},
					{divId:"chartId4"},
					{divId:"chartId5"}
				];
			});
		</script>
	</head>
	<body ng-app="idApp" ng-controller="idCon">
		<div ng-repeat="chart in divIds">
			<div id="{{chart.divId}}">{{chart.divId}}</div>
		</div>
	</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动态生成div的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.divIds = [
					{divId:"chartId1"},
					{divId:"chartId2"},
					{divId:"chartId3"},
					{divId:"chartId4"},
					{divId:"chartId5"}
				];
			});
		</script>
	</head>
	<body ng-controller="idCon" ng-app="idApp" class="ng-scope">
		<!-- ngRepeat: chart in divIds --><div ng-repeat="chart in divIds" class="ng-scope">
			<div id="chartId1" class="ng-binding">chartId1</div>
		</div><!-- end ngRepeat: chart in divIds --><div ng-repeat="chart in divIds" class="ng-scope">
			<div id="chartId2" class="ng-binding">chartId2</div>
		</div><!-- end ngRepeat: chart in divIds --><div ng-repeat="chart in divIds" class="ng-scope">
			<div id="chartId3" class="ng-binding">chartId3</div>
		</div><!-- end ngRepeat: chart in divIds --><div ng-repeat="chart in divIds" class="ng-scope">
			<div id="chartId4" class="ng-binding">chartId4</div>
		</div><!-- end ngRepeat: chart in divIds --><div ng-repeat="chart in divIds" class="ng-scope">
			<div id="chartId5" class="ng-binding">chartId5</div>
		</div><!-- end ngRepeat: chart in divIds -->
	

</body></html>


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

AngularJS 使用 ng-repeat 为标签设置唯一ID

AngularJS 使用 ng-repeat 为标签设置唯一ID:
  • soindy
  • soindy
  • 2017年06月14日 10:07
  • 776

angularjs 如何动态设置id

https://segmentfault.com/q/1010000007471408/a-1020000007477063 我在html里面动态设置了div的id代码如下: div ng-...

angularJS实现动态添加,删除div

要实现的功能类似下图,动态添加或者删除div 点击 增加可添加一条div  点击删除可删除一条div HTML代码如下:(省略CSS样式代码了) class="accordion-inner"> ...

angularjs 实现动态添加控件

实现下面这样的需求: 点击增加一块数据盘,会出现数据盘选项。 (1)最开始,想到原生javascript,jquery (appendChild()等方法结合angularjs来添加新的元...

AngularJS中,如何给动态生成的元素绑定事件

1 . 我们知道在jquery中,动态生成一个元素,如果要在动态生成元素的同时,动态绑定事件,可以通过live/on方法(在jquery3.0中已经废除了bind方法)。 2 . 在angularj...
  • liwusen
  • liwusen
  • 2016年07月31日 14:25
  • 13965

AngularJs:动态添加和删除选项卡

从左边的菜单栏,每点击一个选项,右边内容区域添加一个选项卡,选项卡可关闭。 左边菜单布局文件 ...
  • ren_qin
  • ren_qin
  • 2015年03月09日 20:34
  • 5711

AngularJS中变量的作用域

本篇将会总结下面的内容:   1 为何需要独立作用域   2 如何实现独立作用域   3 作用域的数据绑定 之前有一些错误,是由于replace拼写错误导致的。 拼写正确后,网友发现报错,无...
  • he90227
  • he90227
  • 2016年01月12日 17:32
  • 2176

AngularJS中如何绑定html内容

问题AngularJS中,通过ng-model为DOM绑定的值默认显示为文本,即使绑定的值中含有HTML标签,也会被解析成安全字符串显示为常量。 但是,如果我们就是希望此DOM以HTML方式显示绑定...

如何给div动态加id

之前做过打印,需要循环遍历多个div,同时需要给id加编号,经过百度搜索,终于让我找到,在此记录一下如何实现: ${m.empname } ${m.evename} ...

AngularJS中获取ng-repeat动态生成的ng-model值

angularJS动态设置model,并设置/获取model的值 代码html 用例集全局参数配置 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:AngularJS动态生成div的ID
举报原因:
原因补充:

(最多只允许输入30个字)