用JQuery和angularjs分别实现两个盒子间按钮的跳转（第一版）

来源：互联网发布：宁波旅游知乎编辑：程序博客网时间：2024/06/05 20:05
来这家公司实习快一个月了。
这次给我们分配的任务是看angularjs,说实话我对什么js是一脸蒙蔽。
这次给的任务是用JQuery和angularjs分别实现两个盒子间按钮的跳转，还有一个清空（此处清空为按钮全部跳转）和排序功能
上代码：
JQuery:html:<!DOCTYPE html><html><head lang="en">    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <title>jQuery</title>    <style>        .table{            width: 600px;            height: 200px;            margin:auto;            padding: 10px;            border-radius:6px;            border:1px solid #ccc;            margin-top: 100px;        }    </style></head><body><table border="1" name="table1" class="table">    <th> BOX 1 </th>    <tr>        <td name="box1" id="box1">            <input type="button" value="b" id="b" onclick="btnClick1('b')"/>            <input type="button" value="c" id="c" onclick="btnClick1('c')"/>            <input type="button" value="a" id="a" onclick="btnClick1('a')"/>        </td>    </tr>    <tr>        <td class="button">            <button onclick="moveAlltoBox2()">清空</button>            <button onclick="orderByBox1()">排序</button>        </td>    </tr></table><table border="1" name="table2" class="table">    <th> BOX 2 </th>    <tr>        <td name="box2" id="box2">            <input type="button" value="g" id="g" onclick="btnClick2('g')"/>            <input type="button" value="d" id="d" onclick="btnClick2('d')"/>            <input type="button" value="e" id="e" onclick="btnClick2('e')"/>            <input type="button" value="f" id="f" onclick="btnClick2('f')"/>        </td>    </tr>    <tr>        <td>            <button onclick="moveAlltoBox1()">清空</button>            <button onclick="orderByBox2()">排序</button>        </td>    </tr></table><script language="JavaScript" src="js/jquery-1.8.2.min.js"></script><script language="JavaScript" src="js/index.js"></script></body></html>js:/** * Created by Dn on 2016/10/19. */$(document).ready(function(){});//ready起点function moveAlltoBox2(){    var num = $("#box1").children();    $("#box1").empty;    $("#box2").append(num);}function moveAlltoBox1(){    var num = $("#box2").children();    $("#box2").empty;    $("#box1").append(num);}function orderByBox1(){    var words = $("#box1").children();    var nwords = [];    for(var i = 0;i<words.length;i++){        nwords[i] = words[i].value;    }    nwords.sort();    $("#box1").empty();    for(var i = 0;i< nwords.length;i++){        $("#box1").append("<input  type='button'  value='"+nwords[i]+"' id='"+nwords[i]+"'onclick=btnClick2(\'"+nwords[i]+"') />" );    }    nwords=[];}function orderByBox2(){    var words = $("#box2").children();    var nwords = [];    for(var i = 0;i<words.length;i++){        nwords[i] = words[i].value;    }    nwords.sort();//排序之后失去了原本的属性，只剩下值    $("#box2").empty();    for(var i = 0;i< nwords.length;i++){        $("#box2").append("<input  type='button'  value='"+nwords[i]+"' id='"+nwords[i]+"' onclick=btnClick2(\'"+nwords[i]+"') />" );    }    nwords=[];}function btnClick1(id){    var idObject = document.getElementById(id);//通过id删除    $('#box2').append("<input  type='button'  value='"+id+"' id='"+id+"' onclick=btnClick2(\'"+id+"') />");//    idObject.parentNode.removeChild(idObject);    idObject.remove();}function btnClick2(id){    var idObject = document.getElementById(id);//通过id删除    $('#box1').append("<input  type='button'  value='"+id+"' id='"+id+"' onclick=btnClick1(\'"+id+"') />");    idObject.remove();}angular-js:html:<!DOCTYPE html><html ng-app="myApp"><head lang="en">    <meta charset="UTF-8">    <link rel="stylesheet" href="css/angular-csp.css"/>    <title>angular-js</title>    <style>        .con{            width: 600px;            height: 200px;            margin:auto;            padding: 10px;            border-radius:6px;            border:1px solid #ccc;            margin-top: 100px;        }        .item{            border-radius:2px;            float: left;            width: 50px;            height: 50px;            color:#000;            display:flex;            justify-content: center;            align-items: center;            border:1px solid #ccc;            background-color: #f8f8f8;            margin-right: 10px;        }        .bottom{            width: 100%;            background-color: #f7f7f7;            height: 30px;            text-align: center;        }        button{            margin-right: 10px;            line-height: 30px;            width: 100px;        }        .conItem{            height: 150px;        }    </style></head><body ng-controller="myController"><div class="con">    <div class="conItem">        <div class="item" ng-repeat="item in box3" ng-click="remove1($index)">{{item}}</div>    </div>    <div class="bottom">        <button class="clear" ng-click="clear1()">清除</button>        <button class="order" ng-click="order1()">排序</button>    </div></div><div class="con"><div class="conItem">    <div class="item" ng-repeat="item in box4" ng-click="remove2($index)">{{item}}</div></div><div class="bottom">    <button class="clear" ng-click="clear2()">清除</button>    <button class="order" ng-click="order2()">排序</button></div></div><!--<table border="1">-->    <!--<th>BOX 1</th>-->    <!--<tr id="box1" ng-repeat="item in box|orderBy:orderField">-->        <!--<td>-->            <!--<input type="button" ng-click="" id="{{item.box1}}" value="{{item.box1}} " />-->        <!--</td>-->    <!--</tr>-->    <!--<tr>-->        <!--<td>-->            <!--<button id="clear1" ng-click="moveAll()">清空</button>-->            <!--<button id="order1" ng-click="orderField='box1'">排序</button>-->        <!--</td>-->    <!--</tr>--><!--</table>--><!--<table  border="1">-->    <!--<th>BOX 2</th>-->    <!--<tr id="box2" ng-repeat="item in box|orderBy:orderField1">-->        <!--<td>-->            <!--<input type="button" ng-click="" id="{{item.box2}}" value="{{item.box2}}"/>-->        <!--</td>-->    <!--</tr>-->    <!--<tr>-->        <!--<td>-->            <!--<button id="clear2" ng-click="">清空</button>-->            <!--<button id="order2" ng-click="orderField1='box2'">排序</button>-->        <!--</td>-->    <!--</tr>--><!--</table>--><script src="js/angular.js"></script><script src="js/index.js"></script></body></html>js:/** * Created by Dn on 2016/10/18. */var app = angular.module('myApp',[]);app.controller('myController',function($scope){//json数据源的初始化    $scope.box1=[];    $scope.box2=[];    $scope.i = 0;    $scope.orderField = null;    $scope.orderField1 = null;//    $scope.box=[{'box1':'c','box2':'g'},{'box1':'b','box2':'d'},{'box1':'a','box2':'f'},{'box1':'i','box2':'h'}];    $scope.box3=['b','c','a','d'];    $scope.box4=['g','h','f','i'];    $scope.remove1=function($index){//通过$index，得到当前按键的索引，通过splice删除;        $scope.box4.push($scope.box3[$index]);        $scope.box3.splice($index,1);    }    $scope.clear1=function(){        $scope.box4=$scope.box4.concat($scope.box3);        console.log($scope.box4);        $scope.box3=[];    }    $scope.remove2=function($index){        $scope.box3.push($scope.box4[$index]);        $scope.box4.splice($index,1);    }    $scope.clear2=function(){        $scope.box3=$scope.box3.concat($scope.box4);        console.log($scope.box3);        $scope.box4=[];    }    $scope.order1 = function(){        $scope.box3.sort();        for(var i = 0;i<$scope.box3.length;i++){                $scope.box1.push($scope.box3[i]);        }        $scope.box3=[];        $scope.box3=$scope.box1;        $scope.box1=[];    }    $scope.order2 = function(){        $scope.box4.sort();        for(var i = 0;i<$scope.box4.length;i++){            $scope.box2.push($scope.box4[i]);        }        $scope.box4=[];        $scope.box4=$scope.box2;        $scope.box2=[];    }});
0 0