关闭

AngularJS动态生成div的ID

标签: angularjsJavaScript
6181人阅读 评论(0) 收藏 举报
分类:

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>


1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

AngularJS 使用 ng-repeat 为标签设置唯一ID: <span data-translate={{data1.internation
  • soindy
  • soindy
  • 2017-06-14 10:07
  • 1094

angularJS实现动态添加,删除div

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

ionic AngularJS-设定ion-scroll div 动态高度

在ion_scroll中,必须设定固定的高度后才能实现Y方向的滚动,但是对于不同高度的窗口,需要根据实际情况进行设定其高度 设定该ion_scroll的ng_style属性, ng-sty...
  • jumtre
  • jumtre
  • 2016-04-15 14:44
  • 5014

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

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

angularjs 实现动态添加控件

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

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

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

angularjs 如何动态设置id

https://segmentfault.com/q/1010000007471408/a-1020000007477063 我在html里面动态设置了div的id代码如下: div ng-...
  • tiramisu_ljh
  • tiramisu_ljh
  • 2017-05-25 23:21
  • 1582

angular先加载页面再执行事件,特别在动态生成id,然后做echarts等图表

其实是用到了$timeout, //首先需要定义一个directive directives.directive('onFinishRenderFilters', function ($t...
  • chenhua4088
  • chenhua4088
  • 2016-03-29 18:20
  • 1590

AngualrJS实现表单验证

1、HTML代码 用户名: 用户名不能为空 邮箱: 邮箱不能为空 非法的邮箱地址 密码: 密码必须由数字和字母组成 2、JS代码 var app=...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016-05-10 12:13
  • 453

angularJS directive自定义标签和属性

directive可以自定义标签和属性,首先看一个例子: My HTML File {{person}} ...
  • u010205794
  • u010205794
  • 2015-07-27 15:41
  • 6919
    个人资料
    • 访问:5369403次
    • 积分:71091
    • 等级:
    • 排名:第30名
    • 原创:1921篇
    • 转载:76篇
    • 译文:3篇
    • 评论:1182条
    百度技术栏目
    网易博客
    新浪博客
    博客专栏
    Linux

    文章:47篇

    阅读:64246
    dojo

    文章:10篇

    阅读:30007
    Flex

    文章:13篇

    阅读:28752
    FusionCharts

    文章:14篇

    阅读:70695
    文章分类
    最新评论