Question

我正在尝试创建干函数来添加和删除数组中的项。对于可编辑表格很有用。这需要使用lodash的_.whithout将对象和数组传递给函数，这样每当需要从表（或一般数组）中删除行时，只需传递要删除的对象，然后从中删除数组。 / p>

问题

在函数中定义数组工作正常。删除该对象并更新DOM。将数组作为参数传递不会。该对象已被删除，但DOM未更新。

假设

Angular解除了数组绑定。

知道如何保持数组参数的绑定吗？

Here's the fiddle

以下是代码：

HTML

<table ng-controller="Ctrl">
  <thead>
    <tr>
      <th>
        <input ng-model="newItem" type="number">
      </th>
      <th>
        <button type="button" ng-click="addItemDef(newItem)">Add - Array Defined</button>
      </th>
      <th>
        <button type="button" ng-click="addItemUndef(newItem, items)">Add - Array Undefined</button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="item in items">
      <td>{{item.value}}</td>
      <td>
        <button type="button" ng-click="removeItemDef(item)">Remove - Array Defined</button>
      </td>
      <td>
        <button type="button" ng-click="removeItemUndef(item, items)">Remove - Array Undefined</button>
      </td>
    </tr>
  </tbody>
</table>

的Javascript

function Ctrl($scope) {
  $scope.items = [{
    value: 5
  }];

  $scope.addItemDef = function(item) {
    foo = {
        value: item
      }
      //console.log(foo)
    $scope.items.push(foo);
    console.log($scope.items)
  };
  $scope.addItemUndef = function(item, array) {
    thing = {
      value: item
    }
    array.push(thing);
    console.log($scope.items)
  };

  $scope.removeItemDef = function(obj) {
    console.log('Before')
    console.log($scope.items)
      //    var itemWithId = _.find($scope.items, function(item) {
      //      return item.value == obj.value;
      //    });
    $scope.items = _.without($scope.items, obj);
    console.log('After')
    console.log($scope.items)
  };
  //This is the function that does not work
  $scope.removeItemUndef = function(obj, array) {
    console.log('Before')
    console.log(array)
    console.log($scope.items)
      //    var itemWithId = _.find(array, function(item) {
      //      return item.value == obj.value;
      //    });
    array = _.without(array, obj);
    console.log('After')
    console.log(array)
    console.log($scope.items)
  };
};

Answer 1

这是因为调用_.without时lodash creates a new array。

接下来，将副本分配给函数的参数，该参数对传入的参数没有影响;您只需使用// this can't work: $scope.removeItemUndef = function(obj, array) { console.log('Before', array, $scope.items); array = _.without(array, obj); // << overwriting reference with no effect console.log('After', array, $scope.items); };中的新副本覆盖函数范围内的参数引用。

Array.splice

解决方案是保持数组完整传递，并使用// this however will work: $scope.removeItemUndef = function(obj, array) { console.log('Before', array, $scope.items); var result = _.without(array, obj); // remove the current content, and replace with result's content: Array.prototype.splice.apply(array, [0, array.length].concat(result)); console.log('After', array, $scope.items); };修改该数组的内部。

Array.prototyp.splice.apply(array, ...)

Updated jsfiddle

使用array.splice(...)而不是.apply的原因是splice接受扩展参数而不是数组。通过使用<div class="container"> <img class="imag one" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/glenn-e1464714419457.jpg"> <img class="imag two" src="http://homeinspectioncarync.com/wp-content/uploads/2016/05/Dave-974x1024.jpg"> Glenn Part Owner/Senior Inspector I am Glenn hear me roar!</img> Dave Part Owner/ Manager I am Dave hear me roar! </div> .container { height: 500px; width: 100%; border: 2px solid black; } .imag { height: 100px; width: 100px; float: left; } .name { position: absolute; top: 50vh; } .title { position: absolute; top: 50vh; left: 25vw; } .bio { position: absolute; top: 50vh; left: 50vw; } .glenn { opacity: 0; } .dave { opacity: 0; } .one:hover .glenn { opacity: 1 !important; } .one:hover { opacity: 0.5; }技巧，我们可以改为传递数组。

使用_.without将ng-repeat对象和数组传递给函数

1 个答案: