AngularJS，按数组过滤数组
[英]Angularjs, filter array by array
问题描述
Now, I have tow buttons. 
现在，我有两个按钮。 The first button named "array1", the other button named 'array2'. 第一个按钮名为“ array1”，另一个按钮名为“ array2”。 I have an array called "newArray." 我有一个名为“ newArray”的数组。 I have an array named "array1". 我有一个名为“ array1”的数组。 I have an array named "array2".I have an array called "unselectedArray." 我有一个名为“ array2”的数组。我有一个名为“ unselectedArray”的数组。 When I click the array1 button , I want to show the item in array1, but the item is not in "newArray1". 当我单击array1 button ，我想在array1中显示该项目，但是该项目不在“ newArray1”中。 When I click the array2 button , I want to show the item in array2, but the item is not in "newArray1" This show array is "unselectedArray." 当我单击array2 button ，我想在array2中显示该项目，但是该项目不在“ newArray1”中。此显示数组是“ unselectedArray”。 When I click the item in the "unselectedArray," the item is added in 'newArrray'; 当我单击“ unselectedArray”中的项目时，该项目将添加到“ newArrray”中； I use two hours to solve it, but I haven't written the right code. 我花了两个小时来解决它，但是我没有编写正确的代码。 This is my code: 这是我的代码：
<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 );
});
}
}
}
);
Why my code not work? 为什么我的代码不起作用？ Who can correct my code? 谁可以更正我的代码？ Please write the code which is using $filter . 请编写使用$filter的代码。 Who can create AngularJS custom filters to realize it. 谁可以创建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;
}
}])
;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.