Wiederverwendbare Funktion in AngularJS wiederverwenden

Question

Ich habe eine Funktion, die sich in meinem Controller wiederholt. Es sieht wie folgt aus:

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

Ich habe es wie 8-mal für 8 verschiedene Arrays.

Gibt es eine Möglichkeit, es einmal zu schreiben und es wieder zu verwenden, nur einige Werte zu ändern?

Answer 1

Sie können eine generische Funktion erstellen, die einen Wert (Container) akzeptiert, in den sie den "Wert" schreiben muss. Wie:

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

Refaktorierungscode zu

(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 Ihrem Controller in Dienst wieder verwendet werden, können Sie es verwenden, wie diese

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

Der einzige Unterschied, den ich getroffen wird, dass Ich habe die gleiche Funktion verwendet, um den Gegenstand zu schieben und zu entfernen. Ich hoffe, das verwirrt Sie nicht.