zoukankan      html  css  js  c++  java
  • angular添加删除dom

    HTML部分

     <div class="resumeInfo_box" ng-repeat="person in postList">
                <div class="box">
                    <div class="box_info_title pr20 tr"><i>*</i><span>公司名称</span></div>
                    <input type="text" class="box_input_info" name="companyName" ng-model="person.name" placeholder="请填写真实姓名" ng-maxlength="15" required zs-focus
                           ng-class="{error_input: resumeForm.companyName.$invalid && resumeForm.companyName.$dirty && !resumeForm.companyName.$focused}"/>
                    <span class="errMsg" ng-show="resumeForm.companyName.$dirty && resumeForm.companyName.$invalid && !resumeForm.companyName.$focused">
                        <span class="warning" ng-show="resumeForm.companyName.$error.required">必填</span>
                        <span class="warning" ng-show="resumeForm.companyName.$error.maxlength">请填写1-15位任意字符</span>
                    </span>
                </div>
                <div class="box">
                    <div class="box_info_title pr20 tr"><i>*</i><span>职位</span></div>
                    <input type="text" class="box_input_info" name="position" ng-model="person.position" placeholder="请填写真实姓名" ng-maxlength="15" required zs-focus
                           ng-class="{error_input: resumeForm.position.$invalid && resumeForm.position.$dirty && !resumeForm.position.$focused}"/>
                    <span class="errMsg" ng-show="resumeForm.position.$dirty && resumeForm.position.$invalid && !resumeForm.position.$focused">
                        <span class="warning" ng-show="resumeForm.position.$error.required">必填</span>
                        <span class="warning" ng-show="resumeForm.position.$error.maxlength">请填写1-15位任意字符</span>
                    </span>
                </div>
                <a ng-show="$index!=0" style="color:red;" ng-click="del($index)">移除</a>
            </div>
    

      js部分

     $scope.postList = [];
                $scope.del=function(idx){
                    $scope.postList.splice(idx,1);
                }
                $scope.addPost = function(){
                    var obj={id:101,position:'前端',name:"甲乙丙"};
                    $scope.postList.push(obj);
                    //老式添加方法
                    //var html =
                    //    '<div class="resumeInfo_box">' +
                    //    '<div><input type="text" class="zs_input" placeholder="填写工作经历"/></div>' +
                    //    '<div><input type="text" class="zs_input" placeholder="填写公司名字"/><span>{{$index}}</span></div>' +
                    //    '<div class="c_f46600" ng-click="delJt($index)">删除</div>' +
                    //    '</div>';
                    //var $html = $compile(html)($scope);
                    //angular.element(".resumeInfo_wrap").append($html);
                };
    

      

  • 相关阅读:
    Kali Linux渗透基础知识整理(二)漏洞扫描
    Elasticsearch为记录添加时间戳timestamp
    手把手带你使用JS-SDK自定义微信分享效果
    SpringBoot学习(3)-SpringBoot添加支持CORS跨域访问
    Java 骚操作--生成二维码
    清除微信内置浏览器缓存
    使用python脚本Telnet 华为交换机备份配置
    如何备份思科、锐捷、Juniper的配置文件
    微信公众平台开发教程Java版(六) 事件处理(菜单点击/关注/取消关注)
    How do you build a database?
  • 原文地址:https://www.cnblogs.com/vonson/p/9761407.html
Copyright © 2011-2022 走看看