从数组中删除元素并更新 table

Question

我有一个绑定到 ng-repeat 的数组，我也有一个按钮，每当用户单击按钮时，数组元素就会被删除，我的代码如下：

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

 });

我的 jfiddle link 如下：

fiddle

现在的问题是，每当我点击按钮时，我想删除 id=1 的元素，但没有任何反应，而且 table 没有更新，有人能帮忙吗？

Answer 1

您只需要一种方法来找到具有特定属性值的项目的索引并将其拼接到数组中。您可以只使用一个简单的 loop/break 来找出它，或者使用带有 shim 支持的 Array.prototype.findIndex。另一个问题是你不能将按钮作为 tbody 浏览器的直接子项，这将使它从 table 中呈现出来，并且应用于 tbody 的 ng-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);
    }
}

带垫片：

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

从数组中删除元素并更新 table

remove element from array and update table

html

javascript

arrays

angularjs

angularjs-directive