CODEWITHSUNDEEP
javascriptangularjs
burner
burner

Reputation: 3

how to remove the data in angularjs?

I've tried to remove the data using indexOf in AngularJS. But remove function is not working. Please help me on what i am doing wrong.

JS:

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

app.controller('myCtrl', ['$scope', '$http', function($scope, $http){

$http.get('data.json').success(function(data){
    $scope.countries = data;
});

$scope.remove = function(jai) {
        var i = $scope.countires.indexOf(jai);
        $scope.countires.splice(i, 1);
};

}]);

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="p02.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">

<ul>
    <li ng-repeat='country in countries'>{{country.name}} - {{country.population}} <a href="" ng-click="remove()">&#215;</a></li>
</ul>

</body>
</html>

JSON

[
  {
    "name": "WORLD",
    "population": 6916183000
  },
  {
    "name": "More developed regions",
    "population": 1240935000
  },
  {
    "name": "Less developed regions",
    "population": 5675249000
  },
  {
    "name": "Least developed countries",
    "population": 838807000
  }]

Upvotes: 0

Views: 1110

Answers (4)

Nagarjuna Reddy
Nagarjuna Reddy

Reputation: 4195

You have to pass parameter inside your function call ng-click="remove(country)"

  <ul>
        <li ng-repeat='country in countries'>{{country.name}} - {{country.population}} <a href="" ng-click="remove(country)">&#215;</a></li>
    </ul>

See this http://jsfiddle.net/75m7e/2523/

Upvotes: 0

Shreejibawa
Shreejibawa

Reputation: 1868

First of all add track by $index in case of duplicates. Now pass index of the country in remove function directly so no need to iterate of using indexOf function .

So In HTML it would look like this:

<li ng-repeat='country in countries track by $index'>{{country.name}} - {{country.population}} <a href="javascript:void(0)" ng-click="remove($index)">&#215;</a></li>

And in your function it should be:

$scope.remove = function(idx) {
    $scope.countires.splice(idx, 1);
};

Let me know if this helps.

Upvotes: 0

John McArthur
John McArthur

Reputation: 1024

I've created an example here:

(function() {

  angular
    .module("app", ["ui.bootstrap"]);

  angular
    .module("app")
    .controller("AppController", AppController);

  AppController.$inject = ["$scope"];

  function AppController($scope) {
    var vm = this;

    vm.remove = remove;

    setup();

    function setup(){
      vm.myArray = loadData();

    }


    function loadData() {
     return [{
        "id":0,
        "name":"Scotland"
      }, {
        "id":1,
        "name":"England"
      }, {
        "id":2,
        "name":"Wales"
      }, {
        "id":3,
        "name":"Northern Ireland"
      },{
        "id":4,
        "name":"France"
      },{
        "id":5,
        "name":"Italy"
      },
      ];
    }
    
    
    function remove(country){
      var i = vm.myArray.indexOf(country);
      vm.myArray.splice(i,1);
    }



  }


})();
<!DOCTYPE html>
<html ng-app="app">

<head>
  <link data-require="[email protected]" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
  <script data-require="[email protected]" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script data-require="[email protected]" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script data-require="[email protected]" data-semver="1.6.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="app.js"></script>
</head>

<body ng-controller="AppController as vm">
  
<div>
      <div class="table-responsive">
          <table class="table table-bordered">
              <thead>
                  <tr>
                      <th class="col-xs-1">ID</th>
                      <th class="col-xs-5">Country</th>
                      <th class="col-xs-6">Change</th>
                  </tr>
              </thead>
              <tbody>
                  <tr ng-repeat="item in vm.myArray">
                      <td class="text-center">
                          {{item.id}}
                      </td>
                      <td>
                          {{item.name}}
                      </td>
                      <td>
                        <button class="btn btn-danger" ng-click="vm.remove(item)">Delete</button>
                      </td>
                   </tr>
               </tbody>
          </table>
     </div>
</div>
  


</body>

</html>

Upvotes: 2

imprezzeb
imprezzeb

Reputation: 716

Add the country as param in your remove method

<ul>
    <li ng-repeat='country in countries'>{{country.name}} - {{country.population}} <a href="" ng-click="remove(country)">&#215;</a></li>
</ul>

Upvotes: 1

Related Questions