AngularJs에서 방금 생성 된 객체를 제거하십시오.

Question

검색 목록이 있습니다.

search.html에 :

<ul class="col-xs-12" ng-repeat="search in searchesCtrl.searches"> 
    <li> 
     <a href="#">{{search.url}}</a><button class="btn btn-danger" ng-click="searchesCtrl.deleteSearch(search)">Delete</button> 
    </li> 
</ul> 

<div class="input-group"> 
    <input type="text" class="form-control" ng-model="searchesCtrl.newSearch.name"/> 
    <input type="text" class="form-control" ng-model="searchesCtrl.newSearch.url"/> 
    <span class="input-group-btn"> 
     <a class="btn btn-primary" ng-click="searchesCtrl.addNewSearch()">Go</a> 
    </span> 
</div> 

search.controller.js :

'use strict'; 

(function() { 

class SearchesComponent { 
    constructor($http) { 
    this.$http = $http; 
    this.searches = []; 
    } 

    $onInit() { 
    this.$http.get('/api/searches') 
     .then(response => { 
     this.searches = response.data; 
     }); 
    } 

    addNewSearch() { 
    if (this.newSearch) { 
     this.$http.post('/api/searches', { 
     url: this.newSearch.url, 
     name: this.newSearch.name 
     }).then(() => { 
     this.searches.push(this.newSearch); 
     this.newSearch = ''; 
     }); 
    } 
    } 

    deleteSearch(search) { 
    this.$http.delete('/api/searches/' + search._id) 
     .then(() => { 
     this.searches.splice(this.searches.indexOf(search),1); 
     }); 
    } 
} 

angular.module('myApp') 
    .component('searches', { 
    templateUrl: 'app/searches/searches.html', 
    controller: SearchesComponent, 
    controllerAs: 'searchesCtrl' 
    }); 
})(); 

내가 페이지를 새로 고치지 않고, 내가 방금 추가 한 검색을 제거하려고하면, 작동하지 않습니다.
ng-click="searchesCtrl.deleteSearch(search)"은 (는) /api/searches/undefined입니다.

나는 $ 인덱스 솔루션없이 작업하려고합니다. 가능한가?

Answer 1

새로 추가 된 search에는 _id 매개 변수가없는 것 같습니다. this.newSearch 만 직접 입력하면 searches 배열에 있습니다.

기본적으로 새 포스트 메서드를 추가하면 & 데이터베이스에 저장된 개체 엔터티가 서버에 의해 채워지는 _id으로 반환됩니다. 그런 다음 새 엔티티 개체를 searches 배열로 푸시합니다. 아직도 개인적으로이 접근법을 매우 나쁘게 느낍니다. 단 한 명의 사용자 만이 시스템을 처리 할 것이라고 가정하기 때문입니다. 우리는 searches 개체를 자바 스크립트에서만 업데이트 할 책임이 있습니다.

로컬에서는 물건을 유지하는 것이 아니라, 이미 $onInit 기능을 수행하고있는 모든 searches을 가져 오기 위해 다시 호출해야한다고 말하고 싶습니다. 따라서 UI에서보고있는 목록이 서버와 동기화되는지 확인합니다. 적절한 방법으로 개체를 삭제하고 저장할 때 getSearches 메서드로 호출해야합니다.

코드

class SearchesComponent { 
    constructor($http) { 
    this.$http = $http; 
    this.searches = []; 
    } 

    getSearches(){ 
    this.$http.get('/api/searches') 
     .then(response => { 
     this.searches = response.data; 
     }); 
    } 

    $onInit() { 
    this.getSearches(); //retrieving list of searches from server 
    } 

    addNewSearch() { 
    if (this.newSearch) { 
     this.$http.post('/api/searches', { 
     url: this.newSearch.url, 
     name: this.newSearch.name 
     }).then(() => { 
     this.getSearches(); //asking for list from server 
     }); 
    } 
    } 

    deleteSearch(search) { 
    this.$http.delete('/api/searches/' + search._id) 
     .then(() => { 
     this.getSearches(); //asking for list from server. 
     }); 
    } 
}