Question

现在，我有两个按钮。第一个按钮名为“array1”，另一个按钮名为“array2”。我有一个名为“newArray”的数组。我有一个名为“array1”的数组。我有一个名为“array2”的数组。我有一个名为“unselectedArray”的数组。当我单击array1 button时，我想在array1中显示该项，但该项不在“newArray1”中。当我单击array2 button时，我想在array2中显示该项，但该项不在“newArray1”中这个show数组是“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

// 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>

Answer 2

<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，按数组过滤数组

2 个答案: