使用ng单击完全删除或删除元素以及数组内的数据

Question

有没有办法可以完全删除或删除元素。我创建的代码只删除元素，但不删除存储它的数据。基本上这个概念就像gmail，如果你点击X或收件人的名字，它将自动从列表中删除

<div class="content referral-sender-page">
  <div class="wrapper">
    <div class="main" ng-controller="ReferralDispatchController">
      <h1 class="h large">Send Invites</h1>
      <!-- TODO: Explanatory text -->
      <div>
      <section class="grid__item bp-md-one-third">
        <h5 class="h medium gray">To</h5>
        <span ng-repeat="e in emails" class="h small email-list">
          <span remove-on-click ng-click="removeEmail()" class="email-item">{{ e }} <small class="close">X</small></span>
        </span>
        <div class="col-2">
          <input class="input" type="email"
                 ng-model="email"
                 placeholder="Email">
          <a ng-click="addEmail()" class="button pads primary" >+</a>
        </div>
      </section>
      <section class="grid__item bp-md-two-thirds">
        <h5 class="h medium gray">Message</h5>
        <p>Write a message to send to your homies with your invite</p>
        <textarea class="text-input" ng-model="message" rows="5">
          This is awesome and you should try it!
        </textarea>
      </section>
      </div>
      <div class="space--bottom one-whole">
        <a ng-click="sendReferral()" class="button pads primary">Send Email Invite</a>
      </div>
    </div>
  </div>
</div>

var ctrls = angular.module('elstudio.controllers.site');

//Removes Element only
ctrls.directive('removeOnClick', function() {
    return {
        link: function(scope, elt, attrs) {
            scope.removeEmail = function() {
                elt.remove();
            };
        }
    }
});


ctrls.controller('ReferralDispatchController', function ($scope, UserService,
                                                         ReferralService) {
    $scope.emails = [];
    $scope.message = '';



    $scope.addEmail = function() {

        if (!$scope.email) {
            $scope.$emit('notify', { message: 'Please provide a valid email address' });
            return;
        }
        // If email already in list, ignore
        // FIXME: Provide feedback
        if ($scope.emails.indexOf($scope.email) != -1) {
            $scope.email = '';
            return;
        }

        $scope.emails.push($scope.email);
        $scope.email = '';
    };

    $scope.sendReferral = function() {
        if (!$scope.loginUser) {
            $scope.$emit('notify', { message: 'Please sign up or log in to your Electric account.',
                                     duration: 3000 });
            angular.element('html, body').animate({ scrollTop: 0 }, 'slow');
            angular.element('.login-toggle').click();
            return;
        }

        if ($scope.email != '') {
            $scope.emails.push($scope.email);
        }

        if (!$scope.emails) {
            $scope.$emit('notify', { message: 'Please provide at least one email address' });
            return;
        }

        var refer = {
            emails: $scope.emails,
            message: $scope.message
        };

        var sendSuccess = function() {
            $scope.$emit('notify', { message: 'An invitation has been sent!',
                                     duration: 4000 });
        };
        var sendFailed = function(error) {
            // Retry?
            $scope.$emit('notify', { message: "Couldn't send invitation",
                                     duration: 4000 });
        };

        ReferralService.email(refer).$promise.then(sendSuccess, sendFailed);
    };
});

Answer 1

在Angular中，你总是（大部分）控制数据本身而不是显示组件。

<span remove-on-click ng-click="removeEmail(e)" class="email-item">{{ e }} <small class="close">X</small></span>

scope.removeEmail = function(e) {
    var index = scope.$parent.emails.indexOf(e);
    scope.$parent.emails.splice(index, 1);
};

对于可在其他类型的列表上重用的指令，您可以考虑将父列表的引用传递给指令，或者将函数传递给delete指令（更好）。