remove element from array and update table

Question

I have a array which is bind to ng-repeat and I have a button as well and whenever user click on button an element of array would be removed my code is as follow:

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

 app.controller('table',function($scope){
 $scope.typesHash=[
    {id:'1',name : 'lemon', price : 100,unit:2.5 },       
     {id:'2',name : 'meat', price : 200,unit:3.3  }];
  $scope.complete=function(){
   jQuery.grep($scope.typesHash, function(value) {
                alert(value.id !='1');
                return value.id !='1';
            });
    } 

 });

my jfiddle link is as follow:

fiddle

Now the problem is whenever I clik on button I want the element with id=1 removed but nothing happens and the table does not update can anyone help?

Probably you need to post your template. Is your complete function getting called? — paulmelnikow
– paulmelnikow, Commented Jan 25, 2015 at 5:57
What do you want? when I click on click Me buttons, what should happen? Which element you want to remove? — micronyks
– micronyks, Commented Jan 25, 2015 at 5:59
Please clarify your question. what is it that you want to remove? How is it even related to the code in the question — PSL
– PSL, Commented Jan 25, 2015 at 6:00
for example element in the array with id 1 should be removed — HMdeveloper
– HMdeveloper, Commented Jan 25, 2015 at 6:03

PSL · Accepted Answer · 2015-01-25 06:10:35Z

1

You just need a way to find the index of item with a specific property value and splice it out it the array. You could just use a simple loop/break to find that out or use Array.prototype.findIndex with shim support. Another issue you cannot have button as a direct child of tbody browser will render it out of the table and the ng-controller which is applied on the tbody will not be applicable to button anymore. So move it accordingly.

Controller:

//Ofcourse you could just use a simplefor/while loop to get the index of the item matching the criteria
$scope.complete = function () {
    var idx = $scope.typesHash.findIndex(function (item) {
        return item.id == 1;
    });
    if (idx + 1) {
        $scope.typesHash.splice(idx, 1);
    }
}

with shim:

if (!Array.prototype.findIndex) {
  Array.prototype.findIndex = function(predicate) {
    if (this == null) {
      throw new TypeError('Array.prototype.find called on null or undefined');
    }
    if (typeof predicate !== 'function') {
      throw new TypeError('predicate must be a function');
    }
    var list = Object(this);
    var length = list.length >>> 0;
    var thisArg = arguments[1];
    var value;

    for (var i = 0; i < length; i++) {
      value = list[i];
      if (predicate.call(thisArg, value, i, list)) {
        return i;
      }
    }
    return -1;
  };
}

Html:

<div class="col-lg-10 col-sm-10 col-xs-10" ng-app="app" ng-controller="table">
      <button type="button" ng-click="complete()">Click Me!</button>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>item</th>
                <th>price</th>
                <th>number</th>
                <th>edit</th>
            </tr>
        </thead>
        <tbody >

            <tr ng-repeat="x in typesHash ">
                <td>{{x.name}}</td>
                <td>{{x.price}}</td>
                <td>{{x.unit}}</td>
                <td>edit</td>
            </tr>
            <tr></tr>
        </tbody>
    </table>
</div>

Fiddle

answered Jan 25, 2015 at 6:10

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

HMdeveloper Over a year ago

Thanks a lo just a question I am a little bit of problem to undersand shim part that you wrote... Can you explain it ?

PSL Over a year ago

@HamedMinaee it is not what i wrote follow the link i provided in the MDN. it is in there. See here

Collectives™ on Stack Overflow

remove element from array and update table

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related