javascript - Passing ng-repeat object and array to function using _.without -

i'm attempting create dry functions add , remove items arrays. useful editable tables. entails passing object , array function using lodash's _.whithout whenever row needs removed table (or array in general) pass object remove , array removed from.

the issue

defining array in function works fine. object removed , dom updated. passing array parameter not. object removed dom not updated.

hypothesis

angular unbinding array.

---

any idea how keep array parameter bound?

here's fiddle

here's code:

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

this because lodash creates new array when calling _.without.

next, assign copy parameter of function has no effect on argument passed in; overwrite parameter reference inside function scope new copy _.without.

// can't work: $scope.removeitemundef = function(obj, array) {    console.log('before', array, $scope.items);    array = _.without(array, obj); // << overwriting reference no effect    console.log('after', array, $scope.items); }; 

the solution leave array passed intact , modify inside of array, using array.splice.

// work: $scope.removeitemundef = function(obj, array) {    console.log('before', array, $scope.items);    var result = _.without(array, obj);    // remove current content, , replace result's content:    array.prototype.splice.apply(array, [0, array.length].concat(result));    console.log('after', array, $scope.items); }; 

updated jsfiddle

the reason using array.prototyp.splice.apply(array, ...) rather array.splice(...) splice accepts spread arguments instead of array. using .apply trick, can pass array instead.