AngularJs路由与添加用户(1)

来源：互联网发布：电脑安装网络调试等编辑：程序博客网时间：2024/04/30 16:58
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.left{float: left;}.right{float: right;}.even{background-color: blue;}.odd{background-color: red;}.first{background-color: yellow;}.f{background-color: pink;}.d{background-color: green;}</style><script type="text/javascript" src="../jQuery-2.1.0/jquery-2.1.0.js" ></script><script type="text/javascript" src="../AngularJS/angular.js" ></script><script type="text/javascript" src="../AngularJS/angular-route.js" ></script>        <script>//光标选中变色$(function(){$("thead tr").addClass("first");$("tbody tr:even").addClass("even");$("tbody tr:odd").addClass("odd");$("tbody tr").mousemove(function(){//alert("asdf");$(this).addClass("f");});$("tbody tr").mouseout(function(){//alert("asdf");$(this).removeClass("f");});$("#tr td").mousedown(function(){//alert("asdf");$(this).addClass("d");});$("#tr td").mouseup(function(){//alert("asdf");$(this).removeClass("d");});});</script><script>var app = angular.module("myApp",["ngRoute"]);//定义路由器app.config(["$routeProvider",function($routeProvider){//使用$routeProvider服务，配置路由规则$routeProvider.when("/addPlayer",{controller:"addPlayerCtrl",templateUrl:"addPlayer.html"}).otherwise({redirectTo:"/addPlayer"});}]);//自定义过滤器app.filter("myFilter",function(){return function(text){if(text.indexOf("敏感字符")>=0){//替换字符串return text.replace(/敏感字符/g,"****");}else{return text;}}});app.controller("myCtrl",function($scope,$location){//定义数据源$scope.players = [{name:"张三",place:"控球后卫",num:11,ticket:999},{name:"李四",place:"大前锋",num:21,ticket:888},{name:"王五",place:"小前锋",num:23,ticket:777},{name:"赵六",place:"中锋",num:10,ticket:666},{name:"周七",place:"得分后卫",num:1,ticket:555}];$scope.order = "-ticket";//点击事件触发路由路径：跳转$scope.goToUrl = function(){$location.path("/addPlayer");}});//添加用户的控制器app.controller("addPlayerCtrl",function($scope){$scope.name = "";$scope.place = "";$scope.num = "";$scope.ticket = "";//点击添加按钮，执行sub方法$scope.sub = function(){var flag1 = flag2 = flag3 = flag4 = false;if($scope.name == null || $scope.name == ""){alert("球员名不能为空");flag1 = false;}else {var flag = true;for(player in $scope.players){if($scope.players[player].name == $scope.name){alert("重复")flag = false;flag1 = false;}}if(flag){flag1 = true;}else{}}if($scope.place == null || $scope.place == ""){alert("位置不能为空");flag2 = false;}else{flag2 = true;}if($scope.num == null || $scope.num == ""){alert("球号不能为空");flag3 = false;}else{flag3 = true;}if($scope.ticket == null || $scope.ticket == ""){alert("票数不能为空");flag4 = false;}else{flag4 = true;}//判断添加用户if(flag1 && flag2 && flag3 && flag4){//如果都为true即输入框都不为空，添加用户var palyer = {name:$scope.name,place:$scope.place,num:$scope.num,ticket:parseInt($scope.ticket)};//将用户添加到数据源$scope.players.push(palyer);}}});</script></head><body ng-app="myApp" ng-controller="myCtrl"><center><div style="width: 500px;"><div class="left">查询<br/><input type="text" ng-model="search "/></div><div class="right">排序<br/><select ng-model="order"><option value="-ticket">票数倒叙</option><option value="ticket">票数正叙</option><option value="-num">球号倒叙</option><option value="num">球号正叙</option></select></div></div><button ng-click="goToUrl()" style="margin-top: 80px;">新增球员</button><br /><br /><table border="1 solid blue" cellpadding="20" cellspacing="0"><thead><tr><th>姓名</th><th>位置</th><th>球号</th><th>票数</th></tr></thead><tbody><tr id="tr" ng-repeat="player in players | filter:search | orderBy:order"><td>{{player.name}}</td><td>{{player.place}}</td><td>{{player.num}}</td><td>{{player.ticket}}</td></tr></tbody></table><br /><div ng-view></div></center><!-- 添加球员显示页面 --><script type="text/ng-template" id="addPlayer.html"><form>姓名:<input type="text" ng-model="name"/><br/>位置:<input type="text" ng-model="place"/><br />球号:<input type="text" ng-model="num"/><br />票数:<input type="text" ng-model="ticket"/><br /><input type="button" value="添加"  ng-click="sub()"/></form></script></body></html>
阅读全文
0 0