ng-repeat 객체 및 배열을 _.without을 사용하여 함수에 전달합니다.

Question

배열에서 항목을 추가 및 제거하기 위해 함수를 생성하려고합니다. 편집 가능한 테이블에 유용합니다. 이것은 lodash의 _.whithout을 사용하는 함수에 객체와 배열을 전달하는 것을 의미하므로 테이블 (또는 일반적으로 배열)에서 행을 제거해야 할 때마다 제거 할 객체와 제거 할 배열을 전달하면됩니다.

기능의 배열을 정의 문제는

잘 작동합니다. 개체가 제거되고 DOM이 업데이트됩니다. 배열을 매개 변수로 전달하는 것은 아닙니다. 개체가 제거되었지만 DOM이 업데이트되지 않았습니다.

가설

코너 배열을 바인딩 해제된다.

---

어떤 방법으로 배열 매개 변수를 바인딩 할 수 있습니까? 여기

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> 

자바 스크립트

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

다음으로 전달 된 인수에 영향을주지 않는 함수의 매개 변수에 복사본을 할당합니다. 함수 범위 내의 매개 변수 참조를 _.without의 새 복사본으로 덮어 씁니다.

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

Updated jsfiddle

Array.prototyp.splice.apply(array, ...)보다는 array.splice(...)를 사용하는 이유는 그 접합

이 배열 대신 확산 인자 수용 할 수있다. .apply 트릭을 사용하면 대신 배열을 전달할 수 있습니다.