zoukankan      html  css  js  c++  java
  • angular中动态删除和添加

    addClass()-为每个匹配的元素添加指定的样式类名
    after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点
    append()-在每个匹配元素里面的末尾处插入参数内容
    attr() - 获取匹配的元素集合中的第一个元素的属性的值
    bind() - 为一个元素绑定一个事件处理程序
    children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选
    clone()-创建一个匹配的元素集合的深度拷贝副本
    contents()-获得匹配元素集合中每个元素的子元素,包括文字和注释节点
    css() - 获取匹配元素集合中的第一个元素的样式属性的值
    data()-在匹配元素上存储任意相关数据
    detach()-从DOM中去掉所有匹配的元素
    empty()-从DOM中移除集合中匹配元素的所有子节点
    eq()-减少匹配元素的集合为指定的索引的哪一个元素
    find() - 通过一个选择器,jQuery对象,或元素过滤,得到当前匹配的元素集合中每个元素的后代
    hasClass()-确定任何一个匹配元素是否有被分配给定的(样式)类
    html()-获取集合中第一个匹配元素的HTML内容
    next() - 取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器,那么只有紧跟着的兄弟元素满足选择器时,才会返回此元素
    on() - 在选定的元素上绑定一个或多个事件处理函数
    off() - 移除一个事件处理函数
    one() - 为元素的事件添加处理函数。处理函数在每个元素上每种事件类型最多执行一次
    parent() - 取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器
    prepend()-将参数内容插入到每个匹配元素的前面(元素内部)
    prop()-获取匹配的元素集中第一个元素的属性(property)值
    ready()-当DOM准备就绪时,指定一个函数来执行
    remove()-将匹配元素集合从DOM中删除。(同时移除元素上的事件及 jQuery 数据。)
    removeAttr()-为匹配的元素集合中的每个元素中移除一个属性(attribute)
    removeClass()-移除集合中每个匹配元素上一个,多个或全部样式
    removeData()-在元素上移除绑定的数据
    replaceWith()-用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
    text()-得到匹配元素集合中每个元素的合并文本,包括他们的后代
    toggleClass()-在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类
    triggerHandler() -为一个事件执行附加到元素的所有处理程序
    unbind() - 从元素上删除一个以前附加事件处理程序
    val()-获取匹配的元素集合中第一个元素的当前值
    wrap()-在每个匹配的元素外层包上一个html元素
    AngularJS 动态添加元素和删除元素

    在控制器中

    //添加
    vm.model.arr = [];
    function add() {
    var obj = {};
    obj.name = vm.model.userAdd.name;
    obj.userType = vm.model.userAdd.userType;
    vm.model.arr.push(obj);
    
    }
    //删除账号
    function del(index) {
    vm.model.arr.splice(index,1);
    
    }

    在页面中,动态遍历arr数组,依次向页面中添加删除时候,传入$index删除指定索引,其中用到splice()
    注: splice() 方法可删除从 index 处开始的零个或多个元素,第二个参数表示删除1个。
    并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。

    <ul ng-repeat="item in vm.model.arr">
      <li>{{item.name}}</li>
      <li>权限:{{item.userType}}</li>
      <li><a href="#" ng-click="vm.userAction.del($index)"><i class="iconfont icon-iconfont05" ></i> 删除</a></li>
    </ul>
  • 相关阅读:
    oracle数据库创建表
    CMD下常用文件操作指令
    C#中int、long、float、double、decimal最大值最小值
    EF框架一对多 多对多关系总结
    如何用vue做网站,如何学习vue?--写两个经典的项目,算是入手
    swiper的使用方法,以及各种JS插件的使用通用技巧
    HTML快速布局技巧!编程的流程控制语句有三种,HTML又如何编写布局呢?
    CSS的移动端适配原理(一)-----屏幕是如何工作的(发光点原理),PC和手机的屏幕是如何渲染图片和文字
    JS语法糖总结----JS语法糖大全----一直更新
    PHPcms 客户定制的连表查询和结果排序的记录----2018-1-29 14:06
  • 原文地址:https://www.cnblogs.com/alhh/p/6513112.html
Copyright © 2011-2022 走看看