正文
【转】AngularJS动态生成div的ID
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
AngularJS动态生成div的ID
原文链接：http://blog.csdn.net/you23hai45/article/details/52348078
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>
<!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>
<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>
aaarticlea/png;base64,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" alt="" />
