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的更多相关文章

js 动态生成div显示id
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
JaveWeb 公司项目（7）----- 通过JS动态生成DIV
Web网页项目的数据表格功能已经大体完成,下面是另一个主要功能,在线视频的显示目前我做的项目是渔政监控方面,在之前C#的版本中已经实现了摄像头的在线监控,用的海康封装好的SDK,目前需要做的工作是在 ...
vue中动态添加div
知识点:vue中动态添加div节点,点击添加,动态生成div,点击删除,删除对应的div,其中数组的长度是动态改变的,如在from表单中应用,直接在提交方法中,获得list,获取所填的元素即可效果: ...
Angular如何给动态生成的元素绑定事件
在AngularJS中,操作DOM一般在指令中完成,事件监听机制是在对于已经静态生成的dom绑定事件,而如果在指令中动态生成了DOM节点,动态生成的节点不会被JS事件监听. 举例来说: angular ...
前端下拉框选择和动态生成调用div
进入到一个项目期中,一边做项目,一边学习其中用到的知识.这些知识都是零碎的,有数据库,有html,有js,还有django.趁周末时间,整理前面遇到过的前端相关的知识点. 下拉框选择 <html ...
angularjs小练习（分别通过ng-repeat和ng-option动态生成select下拉框）
本次做一个简单的关于动态生成select的练习在实现上有两种方式: 其一.通过ng-repeat来实现其二.通过ng-option来实现在页面效果上,两种实现的效果都一样但是在数据选择的数据从 ...
AngularJS中获取ng-repeat动态生成的ng-model值
需求:通过ng-repeat动态生成的CheckBox,实现勾选控制对应的批次号.如图: html: <div class="clearfix"> <div cl ...
动态生成16位不重复随机数、随机创建2位ID
/** 1. * 动态生成16位不重复随机数 * * @return */ public synchronized static String generate16() { StringBuffer ...
Angularjs给动态生成的元素绑定事件
//获取动态生成的元素 getJqforAnguar:function(jqid){ angular.element(document).injector().invoke(function($com ...

随机推荐

Bizatlk Accelerator for RosettaNet安装与配置
以下安装步骤是基于动手实验的BizTalk开发环境(<BizTalk动手实验(一)安装BizTalk Server 2010开发环境> )进行安装. 安装准备运行账户配置新建IIS_W ...
[svc]证书学习索引
数字证书基础知识对称加密/非对称加密细枝末节 openssl对称非对称加密实战使用OpenSSL实现CA证书的搭建过程通过openssl生成证书 HTTPS证书生成原理和部署细节证书各个字段的 ...
解决通过Nginx转发的服务请求头header中含有下划线的key，其值取不到的问题
1. 问题由于在http请求头的头部中设置了一些自定义字段,刚好这些字段中含有下划线,比如bundle_name这种,后端在进去获取头部信息时,发现取不到对应的值 2. 原因及解决办法分析首先看 ...
svn安装教程
svn服务器端下载(VisualSVN) 安装包,选择windows版的VisualSVN-Server https://www.visualsvn.com/downloads/ svn客户端下载(T ...
mysql分区方案的研究
笔者觉得,分库分表确实好的.但是,动不动搞分库分表,太麻烦了.分库分表虽然是提高数据库性能的常规办法,但是太麻烦了.所以,尝试研究mysql的分区到底如何. 之前写过一篇文章,http://www.c ...
oracle表查询优化
ORACLE有个高速缓冲的概念,这个高速缓冲就是存放执行过的SQL语句,那oracle在执行sql语句的时候要做很多工作,例如解析sql语句,估算索引利用率,绑定变量,读取数据块等等这些操作.假设高速 ...
js 模仿jquery 写个简单的小demo
<div id="div" style="background:red;width:100px;height:300px"> 123123123 & ...
ubuntu下core file文件生成及调试
1.简介:corefile 是Linux下程序崩溃时生成的文件,可以用来分析程序崩溃的原因,因为它内部包含了程序崩溃时的堆栈信息. 2.corefile的设置默认情况下,程序崩溃是不会生成coref ...
springboot-async
在项目中,当访问其他人的接口较慢或者做耗时任务时,不想程序一直卡在耗时任务上,想程序能够并行执行, 我们可以使用多线程来并行的处理任务,也可以使用spring提供的异步处理方式@Async. Spri ...
navicat for mysql cant connect to server 10038 远程连接出错
使用的登录账号没有开通远程登录的权限,所以只能在服务器上通过命令行登录. 解决办法如下:1.在服务器上通过命令行或客户端登录mysql:2.执行以下sql:GRANT ALL PRIVILEGES O ...