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. 【C语言天天练（三）】typedef具体解释

    引言: typedef能够看作type define的缩写,顾名思义就是类型定义,也就是说它仅仅是给已有的类型又一次定义了一个方便使用的别名.并没有产生新的数据类型. typedef与define的不 ...

  2. 【20171123】【GITC精华演讲】贝业新兄弟李济宏：如何做到企业信息化建设的加减乘除

    导读 11月23日智慧物流论坛上,贝业新兄弟李济宏分享了<如何做到企业信息化建设的加减乘除>演讲,介绍了如何更好的构建企业信息化系统. 30秒get演讲干货 为什么用户总说系统难用?为什么 ...

  3. POSTMAN发送WebService接口

    WebService是一种跨编程语言和跨操作系统平台的远程调用技术 http://www.oorsprong.org/websamples.countryinfo/countryinfoservice ...

  4. CSS-2

    day 39 学习链接:https://www.cnblogs.com/yuanchenqi/articles/5977825.html 4  文本属性 font-size: 10px; text-a ...

  5. Python中的高级数据结构详解

    这篇文章主要介绍了Python中的高级数据结构详解,本文讲解了Collection.Array.Heapq.Bisect.Weakref.Copy以及Pprint这些数据结构的用法,需要的朋友可以参考 ...

  6. 在 Visual Studio 2017 新建的项目中，无法设置项目版本号的通配符规则

    错误信息:CS8357 指定的版本字符串中包含与确定性不兼容的通配符.从版本字符串删除通配符,或者禁用此编译的确定性 解决方法:删除项目文件中的配置,或将其设为 False :<Determin ...

  7. Renascence架构介绍——文件夹

    这一系列文章是为个人项目作一个介绍.有兴趣的朋友能够关注一下. https://github.com/jxt1234/Renascence 先写个文件夹.以后按文件夹更新 1.自己主动编程体系设想 2 ...

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

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

  9. python 读取大文件，按照字节读取

    def read_bigFile(): f = open("123.dat",'r') cont = f.read() : print(cont) cont = f.read() ...

  10. tun/tap设备_虚拟网卡

    tun/tap 驱动程序实现了虚拟网卡的功能,tun表示虚拟的是点对点设备,tap表示虚拟的是以太网设备,这两种设备针对网络包实施不同的封装.利用tun/tap 驱动,可以将tcp/ip协议栈处理好的 ...