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 如何动态设置id

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

angularJS实现动态添加,删除div

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

我是如何成为一名python大咖的?

人生苦短,都说必须python,那么我分享下我是如何从小白成为Python资深开发者的吧。2014年我大学刚毕业..

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

从左边的菜单栏,每点击一个选项,右边内容区域添加一个选项卡,选项卡可关闭。 左边菜单布局文件 ...

如何给div动态加id

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

angularjs 动态生成多个checkboxs,但只能选择一个

angularjs 动态生成多个checkboxs,但只能选择一个要求: anjulajs 动态生成前端多个checkbox(复选框),但是只能选择一个步骤: 1:创建一个controller,(...
  • qq_Dai
  • qq_Dai
  • 2016-04-26 21:46
  • 3019

angularjs+bootstrapTable为动态生成的代码添加事件

由 boostrap table操作列的数据是动态生成的一个a标签 需要给定一个ng-click事件 1 boostrap table行列html是js动态生成的 2 使用了angularjs...

angularJs中ng-repeat遍历动态生成的表单元素绑定ng-model无效的问题

我在做练习中偶然遇到这个问题,与大家分享一下。我也是刚开始接触angularJs,相信也有人同样遇到过。   问题描述:在使用anjularJs框架核心模块ng双向数据绑定,在ng-repeat遍历对...
  • zpcsgo
  • zpcsgo
  • 2016-11-03 19:28
  • 2123

Jquery - 动态生成左右两列表结构div例子

目标:模拟百度百科中基本信息列,根据信息条目动态生成列表。 例子: // 动态生成左右两列表结构div例子 var result = resultData.result; var json...

JQUERY动态生成DIV,table等数据

//点击问题单个数查看详情 //行索引(最近一个记录 显示状态和模块) var rowIndex = 0; // 严重级别 var diName = ""; // 迭代版本号 var it...
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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