Reusing recurrent function in AngularJS

Question

I have a function that keeps repeating itself in my controller. It looks like this:

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

I have it like 8 times for 8 different arrays.

Is there any way to write it once and reuse it just changing some values?

Adrian · Accepted Answer · 2016-07-11 09:59:50Z

2

You can make a generic function that accepts a value (container) where it needs to write the "value". Like:

$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");

answered Jul 11, 2016 at 9:59

Adrian

1,58712 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raghu Venmarathoor · Accepted Answer · 2016-07-12 06:38:22Z

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

refactoring code to be reused in service

    (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]);
        }
    }
})();

in your controller, you may use it like this

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

The only difference I made is that I used the same function to push and unpush item. I hope this doesn't confuse you.

I get the feeling your solution is more elegant, but I don't really comprehend how to implement it!

Collectives™ on Stack Overflow

Reusing recurrent function in AngularJS

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related