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源码解析,希望对大家有所帮助
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!
网友评论