how to remove item from list and update list in angularjs?

Question

i have platform list in my project , i want remove one item from platform list and see update list without reloading platform list image : platform list image

i use ui-route in my project

body of platform-list.html :

<tbody>
        <tr ng-repeat="platform in platforms">
            <td>{{platform.PlatformID}}</td>
            <td>{{platform.Name}}</td>
            <td><button ui-sref="platform-edit({id: platform.PlatformID})" class="btn btn-warning">Edit&nbsp;<span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>&nbsp;|&nbsp;
            <button ng-click="remove(platform.PlatformID)"  class="btn btn-danger">Delete&nbsp;<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></td>
        </tr>
</tbody>

platform-list-controller.js :

mainApp.controller('platformListController', function ($scope, platform, $filter) {
  platform.query().$promise.then(function (data) {
    $scope.platforms = data;
  }, function (error) {
  });    
});

platform model :

public class Platform
{        
    [Key]
    public int PlatformID { get; set; }    
    public string Name { get; set; }
}

how to write remove code in this controller?

mehdi farhadi · Accepted Answer · 2018-06-07 06:06:17Z

1

this code solve your problem :

mainApp.controller('platformListController', function ($scope, platform, $filter) {    
platform.query().$promise.then(function (data) {
    $scope.platforms = data;
}, function (error) {
});

//add this code 
$scope.remove = function (id) {
    platform.remove({ id: id }).$promise.then(function () {
        $scope.platforms = $filter('filter')($scope.platforms, function (item) {
            return item.PlatformID !== id;
        });
        alert('Removed');
    }, function (error) {
        alert('Failed');
    });
};
//

});

answered Jun 7, 2018 at 6:06

mehdi farhadi

1,5421 gold badge10 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sudhir Ojha · Accepted Answer · 2018-06-07 06:28:02Z

You can use array.splice() method to remove data from array. This syntex is

array.splice(index , howMany[, element1[, ...[, elementN]]])

In your controller

mainApp.controller('platformListController', function ($scope, platform, $filter) {

  $scope.platforms = [];

  platform.query().$promise.then(function (data) {
    $scope.platforms = data;
  }, function (error) {
  });

$scope.remove = function(platformId, index){
    $scope.platforms.splice(index,1);
}

});

and your html should be like following:

<tbody>
        <tr ng-repeat="platform in platforms">
            <td>{{platform.PlatformID}}</td>
            <td>{{platform.Name}}</td>
            <td><button ui-sref="platform-edit({id: platform.PlatformID})" class="btn btn-warning">Edit&nbsp;<span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>&nbsp;|&nbsp;
            <button ng-click="remove(platform.PlatformID, $index)"  class="btn btn-danger">Delete&nbsp;<span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button></td>
        </tr>
</tbody>

MominaAthar · Accepted Answer · 2018-06-07 06:14:04Z

0

What are the properties of $scope.platforms? Probably the easiest (not the most efficient) is to add an ng-click attribute.

In terms of code, this would be the HTML for the Delete button:

`<btn ng-model="delBtn" ng-click="deletePlatform(platform.id)">
    <span>Delete</span>
</btn>`

and the function in the controller or directive would be:

`function deletePlatform(platform.id) {
    $scope.platforms.filter(function (platformItem) {
        return platformItem.id !== platform.id;
    });
}`

answered Jun 7, 2018 at 6:14

MominaAthar

311 silver badge10 bronze badges

Collectives™ on Stack Overflow

how to remove item from list and update list in angularjs?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related