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);
                };
    

      

  • 相关阅读:
    JSP 页面中插入图片
    半角空格 全角空格 不间断空格 通过过滤器解决
    Eclispe 错误:找不到或无法加载加载主类
    Eclipse 新建 Maven web 项目
    Eclipse 中 Maven 项目默认JDK版本为1.5 的解决方法
    Eclipse Maven: Cannot change version of project facet Dynamic web to 3.0 的解决方法
    JSP 页面跳转中的参数传递
    Maven 基本用法
    JSP 页面跳转的实现方法
    Android开发入门(2)Java 基础
  • 原文地址:https://www.cnblogs.com/vonson/p/9761407.html
Copyright © 2011-2022 走看看