angularjs 动态添加html

使用angularjs 在js文件中动态添加html代码页面检查源码时查看,动态添加的代码都有显示,但是添加的angularjs的ng-XXX的指令不再有效果.

百度了一些,都是一些大神级别的操作,没事适合像我这种刚入门的小菜鸡看得懂的代码,所以结合了多个大神的资料总结了一下适合实践代码.不多说直接上代码.

代码我个人理解的是使用$complied指令先将动态添加代码进行编译,然后交给$scope管理,这样正在页面的生成的代码 angularjs就会识别动态添加的代码:

let compiles = $compile("<tr>"+ "<td>" + roomName + "</td>"+ "<td class =" + "{{" + resourceArray[0].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[0].vacRooms + "<br/>￥" + resourceArray[0].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[1].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[1].vacRooms + "<br/>￥" + resourceArray[1].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[2].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[2].vacRooms + "<br/>￥" + resourceArray[2].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[3].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[3].vacRooms + "<br/>￥" + resourceArray[3].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[4].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[4].vacRooms + "<br/>￥" + resourceArray[4].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[5].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[5].vacRooms + "<br/>￥" + resourceArray[5].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[6].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[6].vacRooms + "<br/>￥" + resourceArray[6].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[7].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[7].vacRooms + "<br/>￥" + resourceArray[7].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[8].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[8].vacRooms + "<br/>￥" + resourceArray[8].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[9].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[9].vacRooms + "<br/>￥" + resourceArray[9].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[10].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[10].vacRooms + "<br/>￥" + resourceArray[10].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[11].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[11].vacRooms + "<br/>￥" + resourceArray[11].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[12].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[12].vacRooms + "<br/>￥" + resourceArray[12].ratePrice + "</td>"+ "<td class =" + "{{" + resourceArray[13].vacRooms + "==0?'full_room':'room'" + "}}" + ">剩余:" + resourceArray[13].vacRooms + "<br/>￥" + resourceArray[13].ratePrice + "</td>" +"</tr>")($scope);// 获取元素使用append方法添加编译后的代码$("#roomList").append(compiles);

angularjs 动态添加html相关推荐

Angularjs 动态添加指令并绑定事件
先说使用场景,动态生成DOM元素并绑定事件,非常常见的一种场景,用jq实现效果: http://jsbin.com/gajizuyuju/edit?html,js,output var count=0 ...
AngularJS实现动态添加输入控件功能
功能要求如下: 1. 点击加号可以增加输入框. 2. 点击减号可以减少输入框. 3. 当输入框只有一个的时候,不能再减少输入框. 效果图如下: 只有一个输入框有多个输入框要实现这 ...
向html中追加内容,将数据内容动态添加到HTML中
// 申明一个数组用来装遍历的元素 var li = []; //遍历元素并加载到标签中 for(var i = 0; i var nav_li = ' '+navGroup.self_first_n ...
OpenLayers 动态添加标记（Marker）和信息窗（Popup）
方式一:使用marker方式 1.在地图上添加标记图层 var markers =newOpenLayers.Layer.Markers("Markers"); map.addLa ...
【Runtime】动态添加方法demo
今天写一个小demo来演示下runtime的消息转发和动态添加方法. 一般项目中都会有保存当前登录用户资料的需求,我们可以直接将登录成功后的用户信息分别保存到NSUserDefaults中: [def ...
安卓java代码标签_Android实现动态添加标签及其点击事件
在做Android开发的时候,会遇到动态添加标签让用户选择的功能,所以自己写了个例子,运行效果图如下. 标签可以左右滑动进行选择,点击的时候,会弹出toast提示选择或者取消选择了哪个标签.通过动态添 ...
Quartz动态添加、修改和删除定时任务
2019独角兽企业重金招聘Python工程师标准>>> Quartz动态添加.修改和删除定时任务转载于:https://my.oschina.net/haokevin/blog/1 ...
一种无需留坑为页面动态添加View方案
在Activity或Fragment页面动态添加View,有其应用场景,比如配合运营在首页动态插入H5活动页(如下图手淘的雪花例示[1]),在页面头部插入通知View等.本文结合ActivityLif ...
WCF动态添加ServiceKnownType
WCF中传输自定义类型时,必须在服务接口类(服务协定)上加上ServiceKnownType(typeof(yourClass)), 在实际应用中比较麻烦,可以用动态的办法来实现动态添加. 服务接口类 ...

angularjs 动态添加html

angularjs 动态添加html相关推荐

最新文章

热门文章