AngularJS动态生成div的ID源码解析  更新时间:2016年08月29日 17:16:36   作者:翱翔天地   这篇文章主要介绍了基于AngularJS动态生成div的ID,本文介绍的非常详细,具有参考借鉴价值,对angularjs动态生成div的id相关知识感兴趣的朋友一起学习吧 1、问题背景 给定一个数组对象,里面是div的id;循环生成div元素,并给id赋值 2、实现源码 AngularJS动态生成div的ID {{chart.divId}} 3、实现结果 angularJS动态生成div的ID chartId1 chartId2 chartId3 chartId4 chartId5 以上所述是小编给大家介绍的AngularJS动态生成div的ID源码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 您可能感兴趣的文章: Angularjs 动态添加指令并绑定事件的方法 AngularJS实现动态编译添加到dom中的方法 AngularJs动态加载模块和依赖注入详解 angularJS与bootstrap结合实现动态加载弹出提示内容 AngularJS实现给动态生成的元素绑定事件的方法 AngularJS动态绑定HTML的方法分析 AngularJS实现根据变量改变动态加载模板的方法 AngularJs 动态加载模块和依赖 AngularJS使用ngOption实现下拉列表的实例代码 AngularJS使用ng-options指令实现下拉框 AngularJS实现动态添加Option的方法 angularjs div id 相关文章 angularjs学习笔记之完整的项目结构 这篇文章主要介绍了angularjs学习笔记之完整的项目结构的相关资料,需要的朋友可以参考下 2015-09-09 angularjs封装$http为factory的方法 本篇文章主要介绍了angularjs封装$http为factory的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-05-05 angularjs实现table增加tr的方法 下面小编就为大家分享一篇angularjs实现table增加tr的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧 2018-02-02 详解angularjs中的隔离作用域理解以及绑定策略 本篇文章主要介绍了详解angularjs中的隔离作用域理解以及绑定策略,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2017-05-05 AngularJS单选框及多选框实现双向动态绑定 这篇文章主要为大家详细介绍了AngularJS单选框及多选框实现双向动态绑定的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 2016-01-01 AngularJS 服务详细讲解及示例代码 本文主要介绍AngularJS 服务,这里整理了AngularJS 服务的基本知识资料,并附示例代码和实现效果图,有兴趣的小伙伴可以参考下 2016-08-08 AngularJS控制器详解及示例代码 本文主要介绍AngularJS控制器,这里整理了控制器的相关资料和提供示例代码及实例效果图,有需要的小伙伴可以参考下 2016-08-08 Angular.js去除页面中显示的空行方法示例 这篇文章主要介绍了Angular.js去除页面中显示的空行方法,文中给出了详细的示例代码供大家参考学习,相信对大家具有一定的参考价值,需要的朋友们下面来一起看看吧。 2017-03-03 Angular.js中下拉框实现渲染html的方法 这篇文章主要给大家介绍了关于在Angular.js中下拉框实现渲染html的方法,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来跟着小编一起来学习学习吧。 2017-06-06 angular中的post请求处理示例详解 这篇文章主要给大家介绍了关于angular中post请求处理的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者使用angular具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧 2020-06-06 最新评论

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 动态添加指令并绑定事件的方法
  • AngularJS实现动态编译添加到dom中的方法
  • AngularJs动态加载模块和依赖注入详解
  • angularJS与bootstrap结合实现动态加载弹出提示内容
  • AngularJS实现给动态生成的元素绑定事件的方法
  • AngularJS动态绑定HTML的方法分析
  • AngularJS实现根据变量改变动态加载模板的方法
  • AngularJs 动态加载模块和依赖
  • AngularJS使用ngOption实现下拉列表的实例代码
  • AngularJS使用ng-options指令实现下拉框
  • AngularJS实现动态添加Option的方法
张贴在3