在AngularJS中重用循環函數

Question

我有一個不斷在控制器中重復的功能。 看起來像這樣：

//FUNCTION 1

$scope.selectedage = [];
$scope.pushage = function (age) {
    age.chosen = true;
    $scope.selectedage.push(age);
    console.log($scope.selectedage);
};
$scope.unpushage = function (age) {
    age.chosen = false;
    var index=$scope.selectedage.indexOf(age)
    $scope.selectedage.splice(index,1);     
    console.log($scope.selectedage);
}


//FUNCTION 2

$scope.selectedgender = [];
$scope.pushgender = function (gender) {
    gender.chosen = true;
    $scope.selectedgender.push(gender);
    console.log($scope.selectedgender);
}; 
$scope.unpushgender = function (gender) {
    gender.chosen = false;
    var index=$scope.selectedgender.indexOf(gender)
    $scope.selectedgender.splice(index,1);     
    console.log($scope.selectedgender);
}

我對8個不同的數組有8次。

有什么方法可以編寫一次然后重用它，只需更改一些值即可？

Answer 1

您可以在需要寫入“值”的地方制作一個接受值（容器）的通用函數。 喜歡：

$scope.push = function(container, value){
    value.chosen = true;
    container.push(value);
    console.log(container);
}

$scope.unpush = function(container, value){
    value.chosen = false;
    var index = container.indexOf(value)
    container.splice(index, 1);     
    console.log(container);
}

//sample
$scope.push($scope.selectedage, 10);
$scope.push($scope.selectedgender, "Male");

Answer 2

function togglePushStatusOfItem(item, itemKey, chosenStatus){
 item.status = chosenStatus;
 if(chosenStatus == true){
   $scope[itemKey].push(item);
 } else {
   var index=$scope[itemKey].indexOf(item)
   $scope[itemKey].splice(index,1); 
 }
 console.log($scope[itemKey]);
}

togglePushStatusOfItem(user, 'selectedAge',true);

重構代碼以在服務中重用

    (function() {
    'use strict';

    angular
        .module('myApp')
        .factory('ItemFactory', ItemFactory);

    ItemFactory.$inject = [];

    /* @ngInject */
    function ItemFactory() {
        var service = {
            toggleItemStatus: toggleItemStatus
        };
        return service;

        ////////////////
        /*
        itemContainer - equivalent to scope
        item - item to replace or push 
        itemKey - itemKey 
        chosenStatus - true to push and false to remove
        */
        function toggleItemStatus(itemContainer, item, itemKey, chosenStatus) {
            item.status = chosenStatus;
            if (chosenStatus == true) {
                itemContainer[itemKey].push(item);
            } else {
                var index = $scope[itemKey].indexOf(item)
                itemContainer[itemKey].splice(index, 1);
            }
            console.log(itemContainer[itemKey]);
        }
    }
})();

在您的控制器中，您可以像這樣使用它

ItemFactory.toggleItemStatus($scope, item, 'selectedAge', true);// to push item
ItemFactory.toggleItemStatus($scope, item, 'selectedAge', false);// to remove item

我所做的唯一區別是，我使用了相同的功能來推動和取消推動項目。 我希望這不會使您感到困惑。