angularJS 동적 추가,div 삭제 방법

구현 할 기능 은 다음 그림,동적 추가 또는 삭제 div 와 유사 합 니 다.
추 가 를 누 르 면 div 를 추가 할 수 있 습 니 다.삭 제 를 누 르 면 div 를 삭제 할 수 있 습 니 다.

HTML 코드 는 다음 과 같 습 니 다.(CSS 스타일 코드 를 생략 하고 크게 웃 었 습 니 다)

<div class="accordion-inner">
  <div class="alert alert-info fade in" ng-repeat="permission in permissions">   :
    <select id="" class="grantees" disabled="" style=" margin-bottom: 3px;" ng-model="permission.grantee">
      <option value="everyone">   </option>
      <option value="authenUsers">      </option>
      <option value="me" selected="">   </option>
    </select>
    <input type="checkbox" checked="" class="permissions" disabled="" ng-model="permission.port1">Open/Download
    <input type="checkbox" checked="" class="permissions" disabled="" ng-model="permission.port2">View Permissions
    <input type="checkbox" checked="" class="permissions" disabled="" ng-model="permission.port3">Edit Permissions
    <button class="btn" type="button" style="float: right;" ng-click="delPermission($index)">  </button>
  </div>
  <div>
    <button class="btn" type="button" ng-click="addPermission($index)">      </button>
  </div>
  <br>
  <div>
    <button class="btn btn-primary" type="button">  </button>
    <button class="btn" type="button">  </button>
  </div>
</div>

추가 및 삭 제 된 JS 코드 는 다음 과 같 습 니 다.

//      div
$scope.permissions = [{grantee: "",port1:"",port2:"",port3:""}];
$scope.addPermission = function($index){
  $scope.permissions.splice($index + 1, 0,
    {grantee:"", port1:"",port2:"",port3:""});
}
//      div
$scope.delPermission = function($index){
  $scope.permissions.splice($index, 1);
}

이상 의 이 angularJS 는 동적 추 가 를 실현 합 니 다.div 를 삭제 하 는 방법 은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 저희 도 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.