AngularJS动态生成div的ID源码解析

更新时间：2016年08月29日 17:16:36 作者：翱翔天地

这篇文章主要介绍了基于AngularJS动态生成div的ID,本文介绍的非常详细，具有参考借鉴价值，对angularjs动态生成div的id相关知识感兴趣的朋友一起学习吧

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动态生成div的ID源码解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

Angular4学习之Angular CLI的安装与使用教程
网上很多教程过时，命令在angular4中不适用等等，所以下面这篇文章主要给大家介绍了关于Angular4学习之Angular CLI的安装与使用教程的相关资料，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。
2018-01-01
Angular数据绑定机制原理
本篇文章主要介绍了Angular数据绑定机制原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04
AngularJS中的指令实践开发指南(二)
这篇文章主要介绍了AngularJS中的指令实践指南(二)的相关资料,需要的朋友可以参考下
2016-03-03
详解Angular2学习笔记之Html属性绑定
本篇文章主要介绍了详解Angular2学习笔记之Html属性绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-01-01
Angular中使用嵌套Form的详细步骤
Angular响应式表单使用显式的、不可变的方式,管理表单在特定的时间点上的状态,下面这篇文章主要给大家介绍了关于Angular中使用嵌套Form的详细步骤,需要的朋友可以参考下
2022-04-04
使用ionic播放轮询广告的实现方法(必看)
下面小编就为大家带来一篇使用ionic播放轮询广告的实现方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-04-04
angularJs中orderBy筛选以及filter过滤数据的方法
今天小编就为大家分享一篇angularJs中orderBy筛选以及filter过滤数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
详谈Angular 2+ 的表单（一）之模板驱动型表单
这篇文章主要介绍了Angular 2+ 的表单（一）之模板驱动型表单,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-04-04
深入浅出讲解Angular变更检测
这篇文章主要给大家介绍了关于Angular变更检测的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
使用typescript开发angular模块并发布npm包
本篇文章主要介绍了使用typescript开发angular模块并发布npm包，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-04-04