angular 点击动态添加的两种方法

使用的路由为ui-route

angular 点击动态添加的两种方法_第1张图片
拼接完成插入到父级盒子当中

第一种:拼接法

html中定义点击事件,同jquery一样做拼接,拼接完成之后定义变量$ohtml(也可做其他命名);var $ohtml = $compile(ohtml)($scope);$scmpile编译;得到一个编译函数,再传入$scope,就会在当前作用域进行编译,返回编译好的jqLite对象,这时就可以直接添加到文档中了;编译的实质其实就是对dom对象解析,使dom对象与scope进行耦合;完成之后添加到某一个div盒子中。


逐条删除:绑定删除事件,传入参数$event,查找到这个按钮的父元素删除,$($event.target)等同于this

function removeResult($event){

$($event.target).parents("#ss").remove();

};


第二种:数组方法添加

首先定义一个对象,对象中放有数组,当我们点击添加事件后会向数组中添加对象;


angular 点击动态添加的两种方法_第2张图片
初始定义一个数组
angular 点击动态添加的两种方法_第3张图片
点击添加事件每点击添加一次,向上一个数组中push一个对象
angular 点击动态添加的两种方法_第4张图片
在html文件中添加的话在父级盒子做循环遍历,利用ng-model进行绑定

你可能感兴趣的:(angular 点击动态添加的两种方法)