How to implement dynamic addition and deletion of div methods in angularJS

Below I will share with you an article about dynamically adding and deleting p methods in angularJS. It has a good reference value and I hope it will be helpful to everyone.

The function to be implemented is similar to the picture below, dynamically add or delete p

Click to add to add a p, click to delete to delete a p

HTML code is as follows: (CSS style code is omitted lol)

<p class="accordion-inner">
  <p 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>
  </p>
  <p>
    <button class="btn" type="button" ng-click="addPermission($index)">增加访问许可</button>
  </p>
  <br>
  <p>
    <button class="btn btn-primary" type="button">保存</button>
    <button class="btn" type="button">取消</button>
  </p>
</p>

The added and deleted JS codes are as follows:

//增加许可访问p
$scope.permissions = [{grantee: "",port1:"",port2:"",port3:""}];
$scope.addPermission = function($index){
  $scope.permissions.splice($index + 1, 0,
    {grantee:"", port1:"",port2:"",port3:""});
}
//删除许可访问p
$scope.delPermission = function($index){
  $scope.permissions.splice($index, 1);
}

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Detailed explanation of FastClick source code (detailed tutorial)

How to implement table content paging using vue and element-ui

How to use vue to convert timestamps into custom time formats

The above is the detailed content of How to implement dynamic addition and deletion of div methods in angularJS. For more information, please follow other related articles on the PHP Chinese website!