脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → AngularJS → angularjs 动态生成

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

 更新时间：2016年08月29日 17:16:36   作者：翱翔天地  
这篇文章主要介绍了基于AngularJS动态生成div的ID,本文介绍的非常详细，具有参考借鉴价值，对angularjs动态生成div的id相关知识感兴趣的朋友一起学习吧

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源码解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 在Angular中使用innerHTML属性绑定的方法

    在Angular中使用innerHTML属性绑定的方法

    Angular 2+ 支持使用 [innerHTML] 属性绑定来渲染 HTML,如果你使用插值,它会被视为字符串,本文将介绍如何使用 [innerHTML] 以及一些注意事项,需要的朋友可以参考下
    2024-02-02
  • angular4实现带搜索的下拉框

    angular4实现带搜索的下拉框

    这篇文章主要为大家详细介绍了angular4实现带搜索的下拉框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 深究AngularJS之ui-router详解

    深究AngularJS之ui-router详解

    本篇文章主要介绍了深究AngularJS之ui-router详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • angular或者js怎么确定选中ul中的哪几个li

    angular或者js怎么确定选中ul中的哪几个li

    下面小编就为大家带来一篇angular或者js怎么确定选中ul中的哪几个li。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 浅谈angularjs $http提交数据探索

    浅谈angularjs $http提交数据探索

    这篇文章主要介绍了浅谈angularjs $http提交数据探索，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
    2017-01-01
  • angular4响应式表单与校验实现demo

    angular4响应式表单与校验实现demo

    这篇文章主要介绍了angular4响应式表单与校验实现demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-05-05
  • AngularJs用户输入动态模板XSS攻击示例详解

    AngularJs用户输入动态模板XSS攻击示例详解

    这篇文章主要给大家介绍了关于AngularJs用户输入动态模板XSS攻击的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用angularjs具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
    2018-04-04
  • AngularJS基础知识

    AngularJS基础知识

    这篇文章主要介绍了AngularJS基础知识,包括AngularJS定义和特点以及构建AngularJS应用的方法，推荐给大家。
    2014-12-12
  • angular.extend方法的具体使用

    angular.extend方法的具体使用

    本篇文章主要介绍了angular.extend方法的具体使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • AngularJS实现表单验证功能

    AngularJS实现表单验证功能

    这篇文章主要为大家详细介绍了AngularJS实现表单验证功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-01-01

最新评论