AngularJS，按數組過濾數組
[英]Angularjs, filter array by array
問題描述
現在，我有兩個按鈕。 第一個按鈕名為“ 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自定義過濾器來實現它。
2 個解決方案
解決方案1
0 2016-11-08 06:34:09
// 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>
解決方案2
0 已采納 2016-11-08 08:39:22
<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;
}
}])
;
Angularjs：使用 $filter 過濾數組
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.