AngularJs ngRepeat 요소 제거

AngularJs ngRepeat 요소 제거

ngRepeat 디렉티브에 아이템 삭제를 어떻게 구현해야 하는지에 대한 질문이 꽤 있는데, 제가 알기로는 아이템의 $index를 전달하기 위해 ngClick을 사용하고 어떤 제거 함수를 트리거하는 것으로 귀결됩니다.

그러나 ngRepeats가 여러 개 있는 예를 찾을 수 없었습니다.

<div ng-controller="MyController">
    <div ng-repeat="email in user.emails">
        {{ email }} <a href>Remove</a>
    </div>

    <div ng-repeat="phone in user.phones">
        {{ phone }} <a href>Remove</a>
    </div>
</div>

이를 위해 $scope.removePhone과 $scope.removeEmail을 ngClick on Remove anchor를 사용하여 호출해야 합니다.하지만 저는 좀 더 일반적인 해결책을 찾고 있습니다.특히 ngRepeats가 많은 페이지가 많기 때문에.

Remove anchor에 배치하여 다음과 같은 지시문을 작성하려고 합니다.

1. 부모 요소 중 ngRepeat를 찾습니다.
2. 첫 번째 케이스에서는 'user.emails'를 통해 반복되는 내용을 읽습니다.전화기의 초단말기
3. THAT 모델에서 $index 요소를 제거합니다.

마크업은 다음과 같습니다.

<div ng-controller="MyController">
    <div ng-repeat="email in user.emails">
        {{ email }} <a href remove-directive="$index">Remove</a>
    </div>

    <div ng-repeat="phone in user.phones">
        {{ phone }} <a href remove-directive="$index">Remove</a>
    </div>
</div>

제가 원하는 것은 실현 가능한 일입니까?또, 그것을 실현하기 위해서 어떤 방법이 좋습니까?

현재의 진부한 솔루션

현재 제가 하고 있는 방법은 이렇습니다.그것은 진부하고 못생겼지만 내가 더 예쁜 방법을 찾을 때까지 일을 끝내야 한다.

  myAppModule.controller('MyController', function ($scope, $parse, $routeParams, User) {
    $scope.user = User.get({id: $routeParams.id});

    $scope.remove = function ($index, $event) {
      // TODO: Find a way to make a directive that does this. This is ugly. And probably very wrong.
      var repeatExpr = $($event.currentTarget).closest('[ng-repeat]').attr('ng-repeat');
      var modelPath  = $parse(repeatExpr.split('in')[1].replace(/^\s+|\s+$/g, ''));

      $scope.$eval(modelPath).splice($index, 1);
    };
  });

그리고 DOM에서는:

<div ng-repeat="email in user.email" class="control-group">
  <label class="control-label">
    {{ "Email Address"|_trans }}
  </label>

  <div class="controls">
    <input type="text" ng-model="email.address">

    <span class="help-inline"><a href ng-click="remove($index, $event)">{{ "Delete"|_trans }}</a></span>
  </div>
</div>

어레이 및 제거할 항목을 포함하는 일반 제거 방법을 생성할 수 있습니다.

<div ng-app="" ng-controller="MyController">
    <div ng-repeat="email in emails">{{ email }} <a ng-click="remove(emails, $index)">Remove</a>
    </div>
    <div ng-repeat="phone in phones">{{ phone }} <a ng-click="remove(phones, $index)">Remove</a>
    </div>
</div>

$scope.remove = function(array, index){
    array.splice(index, 1);
}

JS 없음

<div ng-repeat="option in options" ng-init=options=[1,2,3,4,5]>
   <button ng-click="options.splice($index,1)">Remove me</button>      
</div>

<div ng-app="" ng-controller="MyController">
    <div ng-repeat="email in emails as datasource">{{ email }} 
        <a ng-click="datasource.splice($index,1)">Remove</a>
    </div>
    <div ng-repeat="phone in phones as datasource">{{ phone }} 
        <a ng-click="datasource.splice($index,1)">Remove</a>
    </div>
</div>

크로스 브라우저를 사용하는 매우 간단하고 편리한 방법은 라이브러리 lodash에서 '제거' 유틸리티 방법을 사용하는 것입니다.

<div ng-repeat="phone in phones">{{ phone }} 
  <a ng-click="removeItem(phones, phone)">Remove</a>
</div>

컨트롤러로 선언합니다.

//inject lodash dependency

//declare method in scope
$scope.removeItem = function(list, item){
   lodash.remove(list,function(someItem) { return item === someItem});
}

물론 원한다면 색인을 사용할 수 있습니다.https://lodash.com/docs#remove 를 참조해 주세요.

배열 대신 개체에서 ng-repeat을 사용한 경우 다음 작업을 수행합니다.

<div ng-app="" ng-controller="MyController">
    <div ng-repeat="email in emails">{{ email }} 
      <a ng-click="remove(emails, email)">Remove</a>
    </div>
    <div ng-repeat="phone in phones">{{ phone }} 
      <a ng-click="remove(phones, phone)">Remove</a>
    </div>
</div>

$scope.remove = function(objects, o){
    delete object[o.id];
}

또는 더 간결하게

<div ng-app="" ng-controller="MyController">
    <div ng-repeat="email in emails">{{ email }} 
      <a ng-click="delete emails[email.id]">Remove</a>
    </div>
    <div ng-repeat="phone in phones">{{ phone }} 
      <a ng-click="delete phones[phone.id]">Remove</a>
    </div>
</div>

이 물체들은 이렇게 생겼다고 가정한다

var emails = {  '123' : { id : '123', .... }  };

var phones = {  '123' : { id : '123', .... }  };

언급URL : https://stackoverflow.com/questions/18251814/angularjs-ngrepeat-element-removal