Angularサービス内のオブジェクトからこの要素を削除するのはなぜ機能しませんか？

Question

Angularjsを使用してアプリケーションを作成していますが、オブジェクトを配列コンテナとして使用しようとしています。私はオブジェクト - >配列 - >オブジェクトを持っています。私は代わりにコンテナとして配列を使うことができますが、それは正しく動作するようには思えません。私は、オブジェクトを含むサービスと、エントリの追加と削除の2つのメソッドを持っています。追加は完璧に動作しますが、削除doesntのは、にもかかわらず、私は、コンソールをチェックアウトして、出力が真（$のlog.log（削除人の[人]）;）..です

var app = angular.module('app', []); 
 

 
    app.controller('appController', function($log, $scope, MyService){ 
 
    $scope.users = MyService.getPersons(); 
 

 
    $scope.addEntry = function(){ 
 
     MyService.addEmail($scope.newPerson, $scope.newEmail); 
 
    }; 
 
    $scope.deleteEntry = function(){ 
 
     MyService.deleteEmail($scope.personDelete); 
 
    }; 
 
    }); 
 
    
 
    angular.module('app').service('MyService', function($log){ 
 
    var persons = {}; 
 
    this.addEmail = function(person, email){ 
 
     persons[person] = persons[person]? persons[person] : []; 
 
     persons[person].push({id: email}); 
 
    }; 
 
    this.deleteEmail = function(person){ 
 
     //$log.log(delete persons[person]); <-- it's true! 
 
     delete persons[person]; 
 
    }; 
 
    this.getPersons = function(){ 
 
     return persons; 
 
    }; 
 
});

は、ここではTD要素のngModelは意味がないと何もしないPlunkr

https://plnkr.co/edit/yElSTpo4lsKz1VnIIGRx?p=preview

Answer 1

です。

<tbody ng-repeat="(person, emails) in users"> 
    <tr ng-repeat="email in emails"> 
     <td>{{person}}</td> 
     <td>{{email.id}}</td> 
     <td> 
     <button ng-click="deleteEntry(person)">delete</button> 
     </td> 
    </tr> 
    </tbody> 

コントローラに：ちょうどdeleteEntryメソッドへpersonオブジェクトを渡す

$scope.deleteEntry = function(person) { 
    MyService.deleteEmail(person); 
}; 

デモ：https://plnkr.co/edit/q7HF4aaRGh0Cxq7yWqZz?p=preview