동적으로 생성 된 행을 제거하는 Angularjs

Question

동적으로 행을 추가하려면 다음 html 및 Angularjs 컨트롤러 코드가 있어야합니다.

<form name="{{form.name}}" 
     ng-repeat="form in forms">   
    <h2>{{form.name}}</h2> 
    <div ng-repeat="(i,cont) in form.contacts"> 
      <input type="text" class="xdTextBox" ng-model="cont.ac"/> 
      <input type="text" class="xdTextBox" ng-model="cont.a_number"/> 
      <input type="text" class="xdTextBox" ng-model="cont.p_id"/> 
    </div> 
    <button ng-click="submit(form)">Submit</button> 
    <button ng-click="addFields(form)">Add</button> 
    <hr> 
</form> 

컨트롤러 코드가 rowsis 추가

$scope.addFields = function (form) {  
    if (typeof form.contacts == 'undefined') { 
     form.contacts = []; 
    } 
    form.contacts.push({name:'', ac: '', a_number: '', p_id: '' }); 
} 

내가 다음에하고 싶은 것은 모든 행 삭제 링크 나 버튼을 통해 내가 마우스가 나타나 하나를 클릭하면, 그것을 제거하는 경우 행을 추가 한 후입니다 그 행. 다음은 행 추가를위한 작업 플러 커입니다. http://plnkr.co/edit/9bUnd7t0PyMwykgi0VZR?p=preview 행에 마우스를 올려 놓고 제거 단추 또는 링크를 클릭하여 목록을 제거 할 수있는 방법을 알려주십시오. 감사

Answer 1

여기를보세요 : 나는 추가

<div ng-repeat="(i,cont) in form.contacts" class="contact"> 

:

내가 DIV 컨테이너에 "접촉"클래스를 추가

http://plnkr.co/edit/zxjHLzqiAQnZzcaUwgBL?p=preview

그래서 나는 CSS에서 그것을 식별 할 수 용기 안의 버튼을 제거하고 "제거"클래스를 부여하십시오.

<button type="button" class="remove" ng-click="form.contacts.splice(i, 1);">Remove</button> 

(참고 : 배열에서 항목을 제거하는 것보다 복잡한 작업이 필요한 경우 연락처 제거를 위해 범위 내부에 기능이 있어야 할 수 있습니다.)

처음에는 버튼을 숨기려면

.contact .remove { visibility: hidden; } 
.contact:hover .remove { visibility: visible; } 

Answer 2

당신은 형태와 색인을 접수에 여러분의 범위에 기능을 추가하여 작업을 수행 할 수 있습니다, 다음에서 원하는 인덱스를 배분하고 :

당신이 행 위에 마우스를 올려 때 표시, 나는 다음과 같은 CSS를 사용

<div ng-repeat="(i,cont) in form.contacts"> 
       <input type="text" class="xdTextBox" ng-model="cont.ac"/> 
       <input type="text" class="xdTextBox" ng-model="cont.a_number"/> 
       <input type="text" class="xdTextBox" ng-model="cont.p_id"/> 
       <button ng-click="delete(form, i)">Delete</button> 
     </div> 

그런 다음 Jav ascript (컨트롤러에이 추가) :

$scope.delete = function(form, index) { 
     form.contacts.splice(index, 1); 
    } 

http://plnkr.co/edit/2SEGDnGoE7kaw0KvOpKr?p=preview