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轻松实现双击排序的功能