Angularjs，陣列過濾器陣列

Question

現在，我有兩個按鈕。第一個按鈕名爲「array1」，另一個按鈕名爲「array2」。我有一個名爲「newArray」的數組。我有一個名爲「array1」的數組。我有一個名爲「array2」的數組。我有一個名爲「unselectedArray」的數組。 當我點擊array1 button時，我想顯示array1中的項目，但該項目不在「newArray1」中。當我單擊array2 button時，我想要顯示array2中的項目，但該項目不在「newArray1」中，此顯示數組爲「unselectedArray」。 當我點擊「unselectedArray」中的項目時，該項目被添加到「newArrray」中; 我用了兩個小時來解決它，但我沒有寫出正確的代碼。 這是我的代碼：

<style> 
    .bigDiv { 
     width: 500px; height: 100%; 
     margin: 60px auto;  background-color: red; 
    } 
    li { 
     float: left; 
     width: 50px; height: 50px; 
    } 
    .selected,.buttonArea,.unselected { 
     height: 100px; 
    } 
</style> 
<div class="bigDiv"> 
    <div class="selected"> 
     <ul> 
      <li ng-repeat="item in newArray"> 
       {{item.text}} 
      </li> 
     </ul> 
    </div> 
    <div class="buttonArea"> 
     <button ng-click="showArrayFun('array1')">array1</button> 
     <button ng-click="showArrayFun('array2')">array2</button> 
    </div> 
    <div class="unselected"> 
      <ul> 
       <li ng-click="addToNewArrayFun($index)" ng-repeat="item in unselectedArray"> 
        {{item.text}} 
       </li> 
      </ul> 
    </div> 
</div> 

angular.module('myApp', []).controller('con', function ($scope) { 
    $scope.array1 = [ 
     { 
      id: 11, 
      text: 'one' 
     }, 
     { 
      id: 12, 
      text: 'two' 
     }, 
    ]; 
    $scope.array2 = [ 
     { 
      id: 21, 
      text: 'winter' 
     }, 
     { 
      id: 22, 
      text: 'spring' 
     }, 
    ]; 
    $scope.newArray = [ 
     { 
      id: 12, 
      text: 'two' 
     } 
    ]; 
    $scope.unselectedArray = []; 
    $scope.addToNewArrayFun = function (index) { 
     $scope.newArray.push($scope.unselectedArray[index]); 
    }; 
    $scope.showArrayFun = function (arrayName) { 
     if (arrayName == 'array1') { 
      $scope.unselectedArray = $scope.array1.filter(function (item) { 
       console.log(($scope.newArray.indexOf(item) == -1)); 
        return (($scope.newArray.indexOf(item) == -1) == true); 
       }); 
      } else if (arrayName == 'array2') { 
      $scope.unselectedArray = $scope.array2.filter(function (item) { 
       console.log(($scope.newArray.indexOf(item) == -1)); 
       return (($scope.newArray.indexOf(item) == -1) == true); 
      }); 

     } 
    } 
} 
); 

爲什麼我的代碼不工作？誰能糾正我的代碼？ 請寫出使用$filter的代碼。 誰可以創建AngularJS自定義過濾器來實現它。

Answer 1

<div class="bigDiv"> 
    <div class="selected"> 
     <ul> 
      <li ng-click=" deleteItemFun($index)" ng-repeat="item in newArray track by $index "> 
       {{item.text}} 
      </li> 
     </ul> 
    </div> 
    <div class="buttonArea"> 
     <button ng-click="showArrayFun('array1')">array1</button> 
     <button ng-click="showArrayFun('array2')">array2</button> 
    </div> 
    <div class="unselected"> 
      <ul> 
       <li ng-click="addToNewArrayFun($index)" ng-repeat="item in unselectedArray | fiArray : newArray "> 
        {{item.text}} 
       </li> 
      </ul> 
    </div> 
</div> 



angular.module('myApp', []).filter('fiArray', function() { 
     return function (array, aimArray) { 
      var tempArray = array; 
      if (tempArray.length == 0) 
       return []; 
      for (var i = 0; i < aimArray.length; i++) { 
       for (var j = 0; j < tempArray.length; j++) { 
        if (tempArray[j].id === aimArray[i].id) { 
         tempArray.splice(j, 1); 
         j--; 
         break; 
        } 
       } 
      } 
      return tempArray; 
     } 
    }) 
    .controller('con', ['$scope', 'fiArrayFilter', function ($scope, fiArrayFilter) { 

     $scope.newArray = [ 
      { 
       id: 12, 
       text: 'two' 
      } 
     ]; 

     $scope.array1 = [ 
      { 
       id: 11, 
       text: 'one' 
      }, 
      { 
       id: 12, 
       text: 'two' 
      }, 
     ]; 
     $scope.array2 = [ 
      { 
       id: 21, 
       text: 'winter' 
      }, 
      { 
       id: 22, 
       text: 'spring' 
      }, 
     ]; 
     $scope.unselectedArray = []; 
     $scope.addToNewArrayFun = function (index) { 
      $scope.newArray.push($scope.unselectedArray[index]); 
     }; 
     $scope.deleteItemFun = function (index) { 
      $scope.newArray.splice(index, 1) 
     } 
     $scope.showArrayFun = function (arrayName) { 
      var copyArr = []; 
      if (arrayName == 'array1') { 
       copyArr = $scope.array1.concat(); 
      } 
      else if (arrayName == 'array2') { 
       copyArr = $scope.array2.concat(); 
      } 
      $scope.unselectedArray = copyArr; 

     } 
    }]) 
; 

Answer 2

// Code goes here 
 

 
angular.module('myApp', []).controller('con', function ($scope) { 
 
    $scope.array1 = [ 
 
     { 
 
      id: 11, 
 
      text: 'one' 
 
     }, 
 
     { 
 
      id: 12, 
 
      text: 'two' 
 
     }, 
 
    ]; 
 
    $scope.array2 = [ 
 
     { 
 
      id: 21, 
 
      text: 'winter' 
 
     }, 
 
     { 
 
      id: 22, 
 
      text: 'spring' 
 
     }, 
 
    ]; 
 
    $scope.newArray = [ 
 
     { 
 
      id: 12, 
 
      text: 'two' 
 
     } 
 
    ]; 
 
    $scope.unselectedArray = []; 
 
    $scope.addToNewArrayFun = function (index) { 
 
     $scope.newArray.push($scope.unselectedArray[index]); 
 
     $scope.unselectedArray.splice(index, 1); 
 
    }; 
 
    $scope.showArrayFun = function (arrayName) { 
 
     if (arrayName == 'array1') { 
 
      $scope.unselectedArray = $scope.array1.filter(function (item) { 
 
        return (($scope.newArray.indexOf(item) == -1)); 
 
       }); 
 
      } else if (arrayName == 'array2') { 
 
      $scope.unselectedArray = $scope.array2.filter(function (item) { 
 
       return (($scope.newArray.indexOf(item) == -1)); 
 
      }); 
 

 
     } 
 
    }; 
 
})

/* Styles go here */ 
 

 
.bigDiv { 
 
     width: 500px; height: 100%; 
 
     margin: 60px auto; 
 
     background-color: red; 
 
    } 
 
    li { 
 
     float: left; 
 
     width: 50px; height: 50px; 
 
    } 
 
    .selected,.buttonArea,.unselected { 
 
     height: 100px; 
 
    }

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
    <head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> 
 
    <script src="script.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    </head> 
 

 
    <body ng-controller="con"> 
 
    <div class="bigDiv"> 
 
    <div class="selected"> 
 
     <ul> 
 
      <li ng-repeat="item in newArray"> 
 
       {{item.text}} 
 
      </li> 
 
     </ul> 
 
    </div> 
 
    <div class="buttonArea"> 
 
     <button ng-click="showArrayFun('array1')">array1</button> 
 
     <button ng-click="showArrayFun('array2')">array2</button> 
 
    </div> 
 
    <div class="unselected"> 
 
      <ul> 
 
       <li ng-click="addToNewArrayFun($index)" ng-repeat="item in unselectedArray"> 
 
        {{item.text}} 
 
       </li> 
 
      </ul> 
 
    </div> 
 
</div> 
 
    </body> 
 

 
</html>