首页 > 代码库 > angularjs入门案例 新玩具-中午吃神马
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 = http://www.mamicode.com/["火锅",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 = http://www.mamicode.com/[
{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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。