AngularJS动态生成div的ID

原文链接：http://blog.csdn.net/you23hai45/article/details/52348078

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>
 

aaarticlea/png;base64,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" alt="" />

 

【转】AngularJS动态生成div的ID的更多相关文章

  1. js 动态生成div显示id

    <!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  2. JaveWeb 公司项目（7）----- 通过JS动态生成DIV

    Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示 目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...

  3. vue中动态添加div

    知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可 效果: ...

  4. Angular如何给动态生成的元素绑定事件

    在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...

  5. 前端下拉框选择和动态生成调用div

    进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...

  6. angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）

    本次做一个简单的关于动态生成select的练习 在实现上有两种方式: 其一.通过ng-repeat来实现 其二.通过ng-option来实现 在页面效果上,两种实现的效果都一样 但是在数据选择的数据从 ...

  7. AngularJS中获取ng-repeat动态生成的ng-model值

    需求:通过ng-repeat动态生成的CheckBox,实现勾选控制对应的批次号.如图: html: <div class="clearfix"> <div cl ...

  8. 动态生成16位不重复随机数、随机创建2位ID

    /** 1. * 动态生成16位不重复随机数 * * @return */ public synchronized static String generate16() { StringBuffer ...

  9. Angularjs给动态生成的元素绑定事件

    //获取动态生成的元素 getJqforAnguar:function(jqid){ angular.element(document).injector().invoke(function($com ...

随机推荐

  1. Debug 路漫漫-07

    201811—201903???   1)关于训练参数是复数的问题    ——q_k ^theta   q_k(是item的特征矩阵)中有可能是负数,而指数 theta 如果是含小数点的话,就会产生复 ...

  2. CentOS 7.X 安全手记

    一.安装云锁 1.报错 Install Selinux Policy Module:yunsuo_install/install: line 371: checkmodule: command not ...

  3. virt-viewer 连kvm　虚机

    # yum install virt-viewer [root@ cfplace]# virsh list --all Id Name State -------------------------- ...

  4. php位运算 与 或 异或 取反

    <?php /** php中有4个位运算,分别是&与 |或 ^异或 ~取反 & 两位全为1,结果为1 | 有一位为1,结果为1 ^ 一个为0,一个为1,结果为1 ~ 取反0-&g ...

  5. node出现 Error: listen EACCES 0.0.0.0:8080错误

    Error: listen EACCES 0.0.0.0:8080 at Object._errnoException (util.js:1022:11) at _exceptionWithHostP ...

  6. iis asp.net4.0注册

    asp.net4.0下载地址:https://download.microsoft.com/download/9/5/A/95A9616B-7A37-4AF6-BC36-D6EA96C8DAAE/do ...

  7. 基于HTML5 Tab选项卡动画切换特效

    基于HTML5 Tab选项卡动画切换特效.这是一款基于HTML5+CSS3实现的带有动画切换效果的Tab选项卡插件cbpFWTabs.效果图如下: 在线预览   源码下载 实现的代码. html代码: ...

  8. java.lang.UnsatisfiedLinkError: No implementation found for long org.opencv.core.Mat.n_Mat()

    Android调试openCV4Android的时候出现以下错误 java.lang.UnsatisfiedLinkError: No implementation found for long or ...

  9. 用WordPress建立专业网站教程 (一步步建站, 一步也不少)

    最新美国域名中心US Domain Center: http://www.usdomaincenter.com/ 建站教程 (10分钟上线, 无需备案): https://www.qiyewp.com ...

  10. 一文弄懂神经网络中的反向传播法(Backpropagation algorithm)

    最近在看深度学习的东西,一开始看的吴恩达的UFLDL教程,有中文版就直接看了,后来发现有些地方总是不是很明确,又去看英文版,然后又找了些资料看,才发现,中文版的译者在翻译的时候会对省略的公式推导过程进 ...