CODEWITHSUNDEEP
javascriptangularjstypescriptecmascript-6
Julien Malige
Julien Malige

Reputation: 3475

Remove a just created object on AngularJs

I have a list of searches.

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'
  });
})();

If I try to remove a search that I just have added, without refreshing the page, it's not working.
The ng-click="searchesCtrl.deleteSearch(search)" is calling /api/searches/undefined.

I try to work without the $index solution. Is it possible ?

Upvotes: 0

Views: 45

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136174

Because the newly added search doesn't seems to have _id parameter, as you are directly pushing only this.newSearch in searches array.

Basically your add new post method should return a object entity which has saved in Database & that will have correct _id populated by server. Next, push that new entity object to searches array. Still I personally feel this approach very bad, as we are assuming that only one user going to handle this system. As we're giving responsibility to update searches object in javascript only.

Here we go, rather than maintaining thing locally, I'd say that, you should re-run get call to fetch all searches which you're already doing $onInit function. So it will make ensure that the list you are seeing on UI is synced with server. You must call getSearches method when you are deleting and saving object which is proper way of doing it.

Code

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.
      });
  }
}

Upvotes: 3

Related Questions