<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
li{
list-style: none;
margin-top: 25px;
}
.ul2 li{
float: left;
margin-left: 15px;
}
</style>
<script type="text/javascript">
function f1(param){
for(var i =1;i<=5;i++){
var id =document.getElementById("d"+i);
id.style.display="none";
if(i===param)
{
id.style.display="block";
}
}
}
</script>
<script src="../angular1.4.6.min.js"></script>
<script src="../angular-route.js"></script>
<script>
var myapp=angular.module("product",[]);
myapp.factory('productList',function(){
return [
{id:1234,name:"ipad",price:3400,kun:10},
{id:1244,name:"aphone",price:6400,kun:100},
{id:1334,name:"mypad",price:4400,kun:20},
{id:8234,name:"zzpad",price:8400,kun:130}
]
})
myapp .controller('productController',function($scope,productList,$http){
/*$scope.search = "ipad";//定義一個變量
alert($scope.search);*/
$http({
url:"package.json"
}).then(function (data) {
$scope.data=data.data;
})
$scope.productList=productList
$scope.orderColumn='name'; //排序字段
// $scope.orderSign='-'; //爲空時正序 爲負號時倒序
$scope.chk=false;
$scope.xuanz=false;
$scope.check=function (val) {
if (val){
$scope.xuanz=true;
}else{
$scope.xuanz=false;
}
}
$scope.sortProduct=function(sortColumn){ //點擊列標題排序事件
$scope.orderColumn=sortColumn;//覺得按照那一列進行排序
if($scope.orderSign=="-"){
$scope.orderSign="";
}else{
$scope.orderSign='-';
}
};
$scope.AlldelProduct = function(name){
if(confirm("是否刪除所有商品") ){
$scope.productList.length=0;
}
}
//刪除產品
$scope.delProduct = function(name){
//alert(name);
if(name!=""){
if(confirm("是否刪除"+name+"商品") ){
var p;
for (index in $scope.productList) {
p = $scope.productList[index];
if(p.name == name){
$scope.productList.splice(index,1);
}
}
}
}
}
var u1="https://free-api.heweather.com/v5/weather?city=";
var u2;
var u3="&key=545d63e185fc48169a43cbabba6e74d2";
$scope.city="beijing";
$scope.show=false;
$scope.searcha=function () {
u2=$scope.city;
$scope.show=true;
$http({
url:u1+u2+u3
}).then(function (data) {
$scope.cityName=data.data.HeWeather5[0].basic.city;
$scope.date=data.data.HeWeather5[0].daily_forecast[0].date;
$scope.temp=data.data.HeWeather5[0].daily_forecast[0].tmp.max;
});
$scope.city="";
};
var dataa={
user:"我",
items:[
{action:"約劉詩詩吃飯",done:false},
{action:"約劉詩詩跳舞",done:false},
{action:"約劉詩詩敲代碼",done:false},
{action:"約劉詩詩爬長城",done:false},
{action:"約劉詩詩逛天壇",done:false},
{action:"約劉詩詩看電影",done:false},
]
};
$scope.dataa=dataa;
$scope.complate=false;
$scope.count=function () {
var n=0;
for(var a=0;a<$scope.dataa.items.length;a++){
if($scope.dataa.items[a].done==false){
n++;
}
}
return n;
};
$scope.add=function () {
if ($scope.action){
$scope.dataa.items.push({"action":$scope.action,"done":false});
$scope.action="";
}
}
});
myapp.filter("doFilter",function () {
return function (items,flag) {
var arr=[];
for(var i=0;i<items.length;i++)
{
if(items[i].done==false)
{
arr.push(items[i]);
}else{
if(flag==true)
{
arr.push(items[i]);
}
}
}
return arr;
}
})
window.onload = newgame; //頁面載入的時候就開始一個新的遊戲
window.onpopstate = popState; //處理歷史記錄相關事件
var state, ui; //全局變量，在newgame()方法中會對其初始化
function newgame(playagain) {
ui = {
heading: null, //文檔最上面的<h1>元素
prompt: null, //要求用戶輸入一個猜測數字
input: null, //用戶輸入猜測數字的地方
low: null, //可視化的三個表格單元格
mid: null, //猜測的數字範圍
high: null,
};
//查詢這些元素中每個元素的id
for(var id in ui) ui[id] = document.getElementById(id);
//給input字段定義一個事件處理程序函數
ui.input.onchange = handleGuess;
//生成一個隨機的數字並初始化遊戲狀態
state = {
n: Math.floor(99 * Math.random())+1, //整數： 0 < n <100
low: 0, //可猜數字範圍下限
high: 100, //可猜數字範圍上限
guessnum: 0, //猜測的次數
guess: undefined //最後一次猜測
};
//修改文檔內容來顯示該初始狀態
display(state);
if (playagain === true)save(state);
}
function save(state) {
if (!history.pushState) return; //如果pushState()方法沒有定義，則什麼也不做
//將一個保存的狀態和url關聯起來
var url = "#guess" + state.guessnum;
history.pushState(state, //要保存的狀態對象
"", //狀態標題：當前瀏覽器會忽視它
url); //狀態URL：對書籤是沒有用的
}
//這是onpopstate的事件處理程序，用於恢復歷史狀態
function popState(event) {
if (event.state) {
//如果事件有一個狀態對象，則恢復該狀態
state = event.state; //恢復歷史狀態
display(state); //顯示恢復的狀態
}else{
history.replaceState(state, "", "#guess" + state.guessnum);
}
};
//每次猜測一個數字的時候，都會調用此事件處理程序
//此處理程序用於更新遊戲的狀態、保存遊戲狀態並顯示遊戲狀態
function handleGuess() {
//從input字段中獲取用戶猜測的數字
var g = parseInt(this.value);
//如果該值是限定範圍中的一個數字
if ((g > state.low) && (g < state.high)) {
//對應的更新狀態
if (g < state.n) state.low =g;
else if (g > state.n) state.high = g;
state.guess = g;
state.guessnum++;
//在瀏覽器歷史記錄中保存新的狀態
save(state);
//根據用戶猜測情況來修改文檔
display(state);
}else{
//無效的猜測：不保存狀態
alert("請輸入大於" + state.low + "和小於" + state.high);
}
}
//修改文檔來顯示遊戲當前狀態
function display(state) {
//顯示文檔的導航和標題
ui.heading.innerHTML = document.title ="我在想一個" + state.low + "到" + state.high + "之間的數字！";
//使用一個表格來顯示數字的取值範圍
ui.low.style.width = state.low + "%";
ui.mid.style.width = (state.high-state.low) + "%";
ui.high.style.width = (100-state.high) + "%";
//確保input字段是可見的、空的並且是聚焦的
ui.input.style.visibility = "visible";
ui.input.value = "";
ui.input.focus();
//根據用戶最近猜測，設置提示
if (state.guess === undefined)
ui.prompt.innerHTML = "輸入你的猜測：";
else if (state.guess < state.n)
ui.prompt.innerHTML = state.guess + "低了，再猜一次：";
else if (state.guess > state.n)
ui.prompt.innerHTML = state.guess + "高了，再猜一次：";
else {
//當猜對了的時候，就隱藏input字段並顯示“再玩一次”按鈕
ui.input.style.visibility = "hidden";
ui.heading.innerHTML = document.title = state.guess + "正確！";
ui.prompt.innerHTML = "你贏了 <button οnclick='newgame(true)'>再玩一次</button>";
}
}
</script>
</head>
<body >
<header class="header">
<h1 align="center">管理系統</h1>
</header>
<div style="width: 100%;height: 500px" ng-app="product" ng-controller="productController">
<div class="nav" style="float: left;width: 20%;height: 100%" align="center">
<ul class="ul" >
<li οnclick="f1(1)">首頁</li>
<li οnclick="f1(2)">新聞</li>
<li οnclick="f1(3)">查詢</li>
<li οnclick="f1(4)">日程</li>
<li οnclick="f1(5)">遊戲</li>
</ul>
</div>
<div style="float: right;width:80%;height:500px;">
<div style="width:100%;height:500px;display: block" class="cv" id="d1">
<ul class="ul2">
<li ng-repeat="item in data">
<p>{{item.title}}</p>
<img ng-src="{{item.img}}">
</li>
</ul>
</div>
<div style="width:100%;height:500px;display: none;" class="cv" id="d2">
<center>
<div class="container" ng-app="product" ng-controller="productController" style="margin-top: 30px" >
<!--導航欄-->
<nav>
<div >
<div id="bs-example-navbar-collapse-1" >
<div>
<input type="text" ng-model="search" placeholder="產品名稱" style="float: left">
<button type="button" style="background-color: red;float: right" ng-click="AlldelProduct()">
批量刪除
</button>
</div>
</div>
</div>
</nav><br />
<table border="1 solid" cellpadding="10" cellspacing="0" style="width:100% ">
<thead>
<tr>
<th >
<input type="checkbox" ng-model="chk" ng-click="check(chk)">
</th>
<th ng-click="sortProduct('id')">
產品編號
<span></span>
</th>
<th ng-click="sortProduct('name')" style="color: red">
產品名稱
<span></span>
</th>
<th ng-click="sortProduct( 'price')">
產品價格
<span></span>
</th>
<th ng-click="sortProduct('kun')">
商品庫存<span></span>
</th>
<th>
操作
<span></span>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in productList | filter:{ 'name':search} | orderBy:(orderSign+orderColumn) " align="center">
<td>
<input type="checkbox" ng-model="xuanz" ng-click="xuan(xuanz,item.id)">
</td>
<td>
{{item.id}}
</td>
<td>
{{item.name}}
</td>
<td>
{{item.price | currency:'￥: '}}
</td>
<td>
{{item.kun}}
</td>
<td>
<button ng-click="delProduct(item.name)" style="background-color: orange">刪除</button>
</td>
</tr>
</tbody>
</table>
</div>
</center>
</div>
<div style="width:100%;height:500px;display: none" class="cv" id="d3">
<div style="margin-top: 30px">
<input type="text" ng-model="city">
<button ng-click="searcha()">點擊查詢</button>
<ul ng-show="show">
<li>{{cityName}}</li>
<li>{{date}}</li>
<li>{{temp}}℃</li>
</ul>
</div>
</div>
<div style="width:100%;height:500px;display: none" class="cv" id="d4">
<h2 style="margin-top: 30px">我的日程<span ng-bind="count()"></span></h2>
<div>
<input type="text" ng-model="action"><button ng-click="add()">添加</button>
</div>
<table>
<thead>
<tr>
<th>序號</th>
<th>日程</th>
<th>完成情況</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in dataa.items|doFilter:complate">
<td>{{$index}}</td>
<td>{{item.action}}</td>
<td><input type="checkbox" ng-model="item.done"></td>
</tr>
</tbody>
</table>
<div>顯示全部<input type="checkbox" ng-model="complate"></div>
</div>
<div style="width:100%;height:500px;display: none" class="cv" id="d5">
<span id="heading" style="padding-top: 100px;">我在想一個數字...</span>
<table >
<tr >
<td id="low"></td>
<td id="mid"></td>
<td id="high"></td>
</tr>
</table>
<label id="prompt"></label>
<input id="input" type="text">
</div>
</div>
</div>
</body>
</html>angularjs綜合題
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章