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,iVBORw0KGgoAAAANSUhEUgAAAFYAAAB7CAYAAADuZHcfAAAHy0lEQVR4Ae2dPXbqPBCGx99aIEVOVmBWENKkSpsOSmi+LmUWACXp0qZKE1hBWEFOisBefGckGSRZYGNriGPG59yLf+Sx9GgsKXolOclwA9miE/gvukUxqAgIWCZHELAClokAk1nxWAHLRIDJrHisgGUiwGRWPLZNYFfjBJJkDCumSMUxu4X5AOM5mMM2jsGTrLTYY1cwThIYzPdYtvMBZihlqv43bpCzZMu2fRK1CoHbC3b7A19eAnqTT8iWIzybwmyTweLWC1DhUL9tCfSn6wqh6wdpL9j6aTp4J0F9vt5Ali2BsodzOwLWlFH5qxcsq/Trmr+aSeDd9F9fP4zyILK9GutXHPfnVIb3p0A+tZ721fnS1za//0gxcbvI4HPS4+S5sx0Gu53DIOnD9GaJuZvpf68AH06Z9gLD5B3u8+v0ir4M3XILE/sIr3sbmxmkfhgVlTd4fL6GDdn6nMAEAWQUFq+lM/KwEiAEdfiyC0vh798x/rxv+w5icAcj4W2bbJZChrHMMKHBDRliH26aYTlnbeX3ZWjRtx22hWY3swzBZgjWegbuLkfes43N0dINly0zzOoD6dDXCrY9C00OAx67gW/M6fThDo6/NDdw5QTowdVNMO/MSSo2DnmRb+uYHe/a9gPeKL7Xfe9CH67J5X9pK4I1tfGNS61e9JxyTxcbqlL3raXX4GPxg5QdR4lv2UNOuF4Ea27++tm3H0+wZwVFD3XKvQXUaB1Z9v7WbhFs7w4e8BVav300+4sl6PkreH+JDKh3BVQCvbw7NSuAKSIiP62yuSJYLFknT1jsr6fQt5tP2FKYe3E/+pRAglfjIVTmau5ff2+OPgbwPfgfa0Rqkeyji03FR91cK7mZ7/LBms/UyvhkUnGd2lXX5COsd91NnbdbE54NqoX9MP6xY1G1APTz6d7NLNVxMXGyGwLuNWqxHGqBmPTk6QrYcuJQ8yCh+/iy7XItB4qCy4URM+UCNiZNy5aAtWDE3BWwMWlatgSsBSPmroCNSdOyJWAtGDF3a4EVMbE8C2qBLTcbIwSPmFimaMSIOdloL1gGMZGghhQNXy6KAbe9YGOkzrNBKq+jefUmQP1N2DUWfYzEEbDdExM9zuqwzyUzBDtv8l4pt/som5nuLN27Rb1EVg+X6YlydCQ85xwHdCzdu5Vmqd0rRpEKhFVxLWheeDbw7F0cfbvKSP5fsQcsv9L0lxRQbyt/mI70XxYTTZJNhtj+48GofRgoCi5ETCSJH6UjGC1rjagJFSv2uSLYoKRi33LCfmvFRGzK0YCQdAabOuOUKiAogjU3dVdMpEoZJSKCioNDHAW/ArCqQYpgOy0mElQa2zCCJSNUgl8E22ExcTU2ULMzSPEHq728yZWLblazRbcKrKbWrpJ1Rce8yYQZqETAXxUT/fTk6VK/xbQc5FLxgoiJVQvNE8MFioITLUjwIAEBG8TS/KSAbc4waEHABrE0PylgmzMMWhCwQSzNTwrY5gyDFmqBFTExyNI5WQusY4Ht4Dxi4n5MbdyEtBcsg5gI3vQoHFOL45UHYM0qjUa3vWCjJdEydLtwxMTe3QPOJVvD20fT+RbWM8zuEbCXISYSB5YZN8HOmrwnyBaD8Fy3xMRybS/IpuLJixMTd+otdhfaflORV+VggaKg22IiTVRGOurf/XvzdQ+Kpas+UwR7EWKiTvztYgNqJtNz/FU4imBNFnRXTLR9zMz/XX9D2Wwy+64q+0WwnRYTfSRb+KFlPCLM5fUtF8F2Vkyk5qO7QNB2/qjWNBg9McjgB6u5vMmVi25/XUxUCTVrGORpsseeHQRR74KIif47HOk4UBREsnzhZgQskwMIWAHLRIDJrHisgGUiwGRWPLZNYEVMLM+NFnssj5i4R6Ltc62D216wHGLinirqikP4SnH1I6atvWCZEqzMolo7/JrB0wPfQ46A7aqYiEXA8Atmr5PGy/4dzZZg303es2WLQh0RE9X6XCZdeq2u+MPkielliYnKYfYzKjnBBoqCroqJWLThsnxYBsA5Fj0ugu2omKjVghE8nYMqFr5FsKZE7paYuIUPWr0Xl6wc5muO469eWd6cizw6rgi2k2IirjD6uR9PYOoWoEFxOEsZcLUAyCLPqS2C7ayYaF7FM/0EwOKTcVQezipUK8DvluJ/BLg7acniW1h4NugbBDjEp+KG91NgXBeW4kDL9auFcmgqPI4QnPaT3XqxtCQJed/LMP+qB0b2VQ/GqPiw6MFETIyOVBsMeyzTwy7JrIBlym0BK2CZCDCZFY8VsEwEmMyKx7YJrIiJ5bnRYo9lEBOddcDyv9L2f8GV46oeor1g2cRE/b3FvCOGfiP3vyj67QVb3TlaGfII2K6KiefJhzBY+WZic/pYxnhb+VRIPbtvL8ppA+X3/fo3E82ypkhNLbBGv7YQ7YFodBjw2K6KiYiR+pnNrET6zftwSz/NWsN/i2A7KiaG2FAHOfWlN/7aXsB4EawJ1C0xMZBy+5TMTLRpmP3AJwTVlUrfTJSZiQGi+anq30xcjd1lSmRmItbeMb6ZiMvP668r71oFfsumUUPAuVnExNzxI/8erLwiP+fizAlYpiwXsAKWiQCTWfFYActEgMmseKyAZSLAZFY8VsAyEWAyKx4rYJkIMJkVjxWwTASYzIrHMoH9B8xQoV0qkreDAAAAAElFTkSuQmCC" 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. linux 设备驱动概述

    linux 设备驱动概述 目前,Linux软件工程师大致可分为两个层次: (1)Linux应用软件工程师(Application Software Engineer):       主要利用C库函数和 ...

  3. 《Effective Java 第三版》目录汇总

    经过反复不断的拖延和坚持,所有条目已经翻译完成,供大家分享学习.时间有限,个别地方翻译得比较仓促,希望有疑虑的地方指出批评改正. 第一章简介 忽略 第二章 创建和销毁对象 1. 考虑使用静态工厂方法替 ...

  4. CountDownLatch、CyclicBarrier和Semaphore 使用示例及原理

    备注:博客园的markDown格式支持的特别不友好.也欢迎查看我的csdn的此篇文章链接:CountDownLatch.CyclicBarrier和Semaphore 使用示例及原理 CountDow ...

  5. php生成毫秒时间戳的例子

    php时间函数time()生成当前时间的秒数,但是在一些情况下我们需要获取当前服务器时间和GMT(格林威治时间)1970年1月0时0分0秒的毫秒数,与Java中的currentTimeMilis()函 ...

  6. ftp软件中保持连接命令CWD、PWD、LIST、NOOP四个操作命令解析

    转自:http://www.aspjzy.com/A/148.html 各位站长都知道,我们在维护网站的时候,经常需要一直保持ftp连接状态,这个时候在很多ftp客户端软件中都有一个保持全局连接的选项 ...

  7. crawler_exa2

    优化中... #! /usr/bin/env python # -*- coding:utf-8 -*- # Author: Tdcqma ''' v17.0920.1401 基本功能实现,漏洞标题与 ...

  8. aspx页面，取得Excel某列不同类型的数据为空

    红色部分需要加上, string connectionString = string.Format("Provider=Microsoft.Jet.OLEDB.4.0;Data Source ...

  9. C#作为客户端调用gsoap生成的C++服务端

    近日在学习C++,偶然遇到网友想用C#调用gsoap生成的C++服务的问题,遂决定研究一下,网上搜索了很久,大多数是C++调用C#的应用.... 经过本人的不断努力,终于找到一种解决问题的方法,总结如 ...

  10. 关于C/C++中求最大公约数和最小公倍数的算法

    1.更相减损法 int gcd(int a,int b) { while(a!=b) { if(a>b) a-=b; else b-=a; } return a; } 2.辗转相除法--递归 i ...