angular js 去重

Daming 2018-06-18
0条评论 713 次浏览
Daming 2018-06-180条评论 713 次浏览






Document

<div id="block">
    <table border="1" cellspacing="0" style="width: 80%;text-align: center;margin: 0 auto">
        <thead>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </thead>
        <tbody>
            <tr ng-repeat="item in arr1 track by $index">
                <td style="width: 30%;">{{item.id}}</td>
                <td style="width: 40%;background-color: aqua">{{item.name}}</td>
                <td style="width: 30%;">{{item.age}}</td>
            </tr>
        </tbody>
    </table>
</div>
<div id="block" style="margin-top: 20px">
    <table border="1" cellspacing="0" style="width: 80%;text-align: center;margin: 0 auto">
        <thead>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </thead>
        <tbody>
            <tr ng-repeat="item in arr2 track by $index">
                <td style="width: 30%;">{{item.id}}</td>
                <td style="width: 40%;background-color: aqua">{{item.name}}</td>
                <td style="width: 30%;">{{item.age}}</td>
            </tr>
        </tbody>
    </table>
</div>
<button ng-click="private.ceshi()">将表一id与表二id一致的用户在表一中同步表二的名字</button>

<input type="button" ng-click="private.ceshi2()" value="去重表一表二id一致的">

<div id="block" style="margin-top: 20px">
    <table border="1" cellspacing="0" style="width: 80%;text-align: center;margin: 0 auto">
        <thead>
            <th>id</th>
            <th>name</th>
            <th>age</th>
        </thead>
        <tbody>
            <tr ng-repeat="item in arr3 track by $index">
                <td style="width: 30%;">{{item.id}}</td>
                <td style="width: 40%;background-color: aqua">{{item.name}}</td>
                <td style="width: 30%;">{{item.age}}</td>
            </tr>
        </tbody>
    </table>
</div>

<script>
    var myapp = angular.module("myapp", []);
    myapp.controller("MainCtrl", function ($scope) {

        $scope.private = {};


        console.log($scope);

        $scope.arr1 = [{
                id: "1",
                name: "王瑞",
                age: 23
            },
            {
                id: "2",
                name: "王强",
                age: 22
            },
            {
                id: "3",
                name: "王磊",
                age: 23
            },
            {
                id: "4",
                name: "王兵",
                age: 23
            },
        ]


        $scope.arr2 = [{
                id: "1",
                name: "王瑞瑞",
                age: 23
            },
            {
                id: "2",
                name: "王强强",
                age: 22
            },
            {
                id: "3",
                name: "王磊磊",
                age: 23
            },
            {
                id: "631",
                name: "马化腾",
                age: 28
            },
            {
                id: "666",
                name: "马云",
                age: 28
            },

        ]


         $scope.arr3=[];


        console.log($scope.arr1);



        $scope.private.ceshi = function () {

            console.log("测试开始");
            for (var i = 0; i < $scope.arr1.length; i++) {


                for (var a = 0; a < $scope.arr2.length; a++) {


                    if ($scope.arr1[i].id == $scope.arr2[a].id) {


                        $scope.arr1.splice(i, 1, $scope.arr2[a]);

                    }

                }

            }


        }

        $scope.private.ceshi2 = function () {

            var tempArr=[];



            for(var i=0;i<$scope.arr2.length;i++){

                tempArr.push($scope.arr2[i]);
            }




            for(var i=0;i<$scope.arr1.length;i++){

                 for(var a=0;a<tempArr.length;a++){


                     if($scope.arr1[i].id===tempArr[a].id){

                      tempArr.splice(a,1);


                     }


            }


            }
            $scope.arr3=$scope.arr1.concat(tempArr);

        }


    })
</script>

0

发表评论

电子邮件地址不会被公开。