angularjs入门案例 新玩具-中午吃神马
angularjs 是一个用来开发单页webAPP的mvv框架，由Google 开发，如果不知道angularjs 的可以先google 下
按照angularjs 的开发一般顺序先搭建好需要做的视图，然后准备数据，最后绑定事件处理业务逻辑，操作DOM事件用户和程序的交互。
1、开始搭建界面，使用bootstrap作为UI框架，可以快速搭建清爽的界面效果，顺便引入 angular.js jquery.js 和我们需要写的app.js 作为业务逻辑
1 <!doctype html> 2 <html ng-app="lottery"> 3 <head> 4 <meta charset="utf-8"> 5 <title>中午吃什嘛!</title> 6 <meta name="fragment" content="!"> 7 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 8 <meta name="description" content=""> 9 <meta name="viewport" content="width=device-width"> 10 11 <link rel="stylesheet" type="text/css" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css"> 12 13 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/250/osagsqji/angular.js"></script> 14 <script type="text/javascript" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script> 15 <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/250/osagsqji/app.js"></script> 16 17 <style type="text/css"> 18 td span{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border:1px solid #ccc;cursor: pointer;} 19 .red{color:red;} 20 .view{height:300px;border:1px solid #ccc;} 21 .buffer{background: url(http://dev.haowa.com/img/ajax_loader.gif) center center no-repeat;} 22 .ground{width:400px;} 23 .ground .one{width:100px;height:100px;float:left;margin:5px;border:1px solid #ccc;text-align:center;text-align:center;line-height:100px;} 24 .ground .one.active{background:#357ebd;border:1px solid #A2FF9C;color:#fff;} 25 .result{color:#f60;} 26 </style> 27 28 </head> 29 <body buffer> 30 <p></p> 31 <div class="container" ng-controller="main"> 32 <div class="row-fluid" > 33 <div class="span6"> 34 <h3 class="result">获取结果:{{result}}</h3> 35 <h5>添加选项</h5> 36 <form ng-submit="add()"> 37 <input type="text" ng-model="value" required size="30" placeholder="名称"> 38 <input class="btn" type="submit" value="添加到预选列表"> 39 </form> 40 <!-- 列表 --> 41 <ul> 42 <li ng-repeat="one in data"> 43 <span>{{one.id}}</span> 44 <input value="{{one.name}}" style="border:1px solid #fff" size="30"> 45 <a ng-click="del(one.id)">删除</a> 46 </li> 47 </ul> 48 </div> 49 <div class="span6"> 50 51 <button class="btn" ng-click="start()" ngDisabled="is_start">开始计算</button> 52 <p></p> 53 <div class="ground"> 54 <div ng-repeat="one in data" id="{{one.id}}" class="one" ng-class="{'active':one.status}" >{{one.name}}</div> 55 </div> 56 </div> 57 </div> 58 </div> 59 </body> 60 </html>
开始写app.js
"use strict" var app = angular.module("lottery",[]); app.controller('main', ['$scope','$timeout', function($scope,$timeout){ $scope.data = [ {id:1,name:"火锅",status:0}, {id:2,name:"中餐",status:0}, {id:3,name:"泰国菜",status:0}, {id:4,name:"韩国料理",status:0} ]; $scope.is_start = false; $scope.result = "还没有开始!"; /** * 添加 * @author ln */ $scope.add = function () { var last_id = getLastId(); $scope.data.push({id:last_id,name:$scope.value,status:0}) } /** * 删除 * @author ln */ $scope.del = function (id) { angular.forEach($scope.data,function(value, key) { if (id == value.id) { $scope.data.splice(key,1); }; }) } $scope.start = function() { if ($scope.is_start) alert("已经开始了！！"); $scope.is_start = true; var queue = []; //滚动队列 var circle = 3; var select_key = 0; //中奖的KEY //随机 select_key = Math.floor(Math.random()*$scope.data.length); //滚动 var next = function(key) { $scope.data[key].status = true; if ((key-1)>=0) $scope.data[key-1].status = false; if (key==0) $scope.data[$scope.data.length-1].status = false; var timer = $timeout(function() { // //结束 if (circle <=0 && select_key == key) { alert("搞定,答案是:"+$scope.data[key].name); $scope.result = $scope.data[key].name; $scope.is_start = false; return; }; // //减少一圈 if ($scope.data.length == key+1){ circle--; } if ($scope.data[key+1]) { next(key+1) }else{ next(0) } },100); } next(0); } /******私有方法 ***********/ function getLastId() { var id = 0; angular.forEach($scope.data,function(value, key) { if (id < value.id) id = value.id }) return ++id; } }]);
这里数据
$scope.data = [
{id:1,name:"火锅",status:0},
{id:2,name:"中餐",status:0},
{id:3,name:"泰国菜",status:0},
{id:4,name:"韩国料理",status:0}
];
作为默认数据，根据 add del 方法实现增加、删除功能
最后关键的开始的滚动抽奖逻辑由 start 方法实现
1 $scope.start = function() { 2 if ($scope.is_start) 3 alert("已经开始了！！"); 4 5 $scope.is_start = true; 6 var queue = []; //滚动队列 7 var circle = 3; 8 var select_key = 0; //中奖的KEY 9 10 //随机 11 select_key = Math.floor(Math.random()*$scope.data.length); 12 13 //滚动 14 var next = function(key) { 15 $scope.data[key].status = true; 16 if ((key-1)>=0) 17 $scope.data[key-1].status = false; 18 if (key==0) 19 $scope.data[$scope.data.length-1].status = false; 20 21 var timer = $timeout(function() { 22 // //结束 23 if (circle <=0 && select_key == key) { 24 alert("搞定,答案是:"+$scope.data[key].name); 25 $scope.result = $scope.data[key].name; 26 $scope.is_start = false; 27 28 return; 29 }; 30 // //减少一圈 31 if ($scope.data.length == key+1){ 32 circle--; 33 } 34 if ($scope.data[key+1]) { 35 next(key+1) 36 }else{ 37 next(0) 38 } 39 },100); 40 } 41 next(0); 42 }
runJs 代码演示
http://runjs.cn/detail/x7wntsvq
