您的位置：首页 > Web前端 > AngularJS

angularjs入门案例新玩具-中午吃神马

2014-07-30 23:25 351 查看

angularjs 是一个用来开发单页webAPP的mvv框架，由Google 开发，如果不知道angularjs 的可以先google 下

按照angularjs 的开发一般顺序先搭建好需要做的视图，然后准备数据，最后绑定事件处理业务逻辑，操作DOM事件用户和程序的交互。

1、开始搭建界面，使用bootstrap作为UI框架，可以快速搭建清爽的界面效果，顺便引入 angular.js jquery.js 和我们需要写的app.js 作为业务逻辑

<!doctype html>
<html ng-app="lottery">
<head>
<meta charset="utf-8">
<title>中午吃什嘛!</title>
<meta name="fragment" content="!">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="">
<meta name="viewport" content="width=device-width">

<link rel="stylesheet" type="text/css" href="/js/sandbox/bootstrap-2.2.1/css/bootstrap.min.css">

<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/250/osagsqji/angular.js"></script>
<script type="text/javascript" src="/js/sandbox/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/250/osagsqji/app.js"></script>

<style type="text/css">
td span{display:inline-block;width:20px;height:20px;line-height:20px;text-align:center;border:1px solid #ccc;cursor: pointer;}
.red{color:red;}
.view{height:300px;border:1px solid #ccc;}
.buffer{background: url(http://dev.haowa.com/img/ajax_loader.gif) center center no-repeat;}
.ground{width:400px;}
.ground .one{width:100px;height:100px;float:left;margin:5px;border:1px solid #ccc;text-align:center;text-align:center;line-height:100px;}
.ground .one.active{background:#357ebd;border:1px solid #A2FF9C;color:#fff;}
.result{color:#f60;}
</style>

</head>
<body buffer>
<p></p>
<div class="container" ng-controller="main">
<div class="row-fluid" >
<div class="span6">
<h3 class="result">获取结果:{{result}}</h3>
<h5>添加选项</h5>
<form ng-submit="add()">
<input type="text" ng-model="value" required size="30" placeholder="名称">
<input class="btn" type="submit" value="添加到预选列表">
</form>
<!-- 列表 -->
<ul>
<li ng-repeat="one in data">
<span>{{one.id}}</span>
<input value="{{one.name}}" style="border:1px solid #fff" size="30">
<a ng-click="del(one.id)">删除</a>
</li>
</ul>
</div>
<div class="span6">

<button class="btn" ng-click="start()" ngDisabled="is_start">开始计算</button>
<p></p>
<div class="ground">
<div ng-repeat="one in data" id="{{one.id}}" class="one" ng-class="{'active':one.status}" >{{one.name}}</div>
</div>
</div>
</div>
</div>
</body>
</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 方法实现

$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);
}

runJs 代码演示
http://runjs.cn/detail/x7wntsvq

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

angularjs入门案例 新玩具-中午吃神马

angularjs入门案例新玩具-中午吃神马