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链接如下：

fiddle

现在的问题是每当我按下按钮我想要删除id = 1的元素但没有任何反应并且表格没有更新任何人都可以帮忙吗？

Answer 1

您只需要一种方法来查找具有特定属性值的项目索引，并将其拼接出数组。你可以使用一个简单的循环/中断来找出它或使用垫片支持Array.prototype.findIndex。您不能将按钮作为tbody浏览器的直接子项的另一个问题是将其从表中删除，并且应用于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

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

1 个答案: