欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-11-17 18:18:40
1、问题背景 给定一个数组对象,里面是div的id;循环生成div元素,并给id赋值 2、实现源码

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源码解析

以上所述是小编给大家介绍的angularjs动态生成div的id源码解析,希望对大家有所帮助