angularjs小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a1{
width: 700px;
}
tr:nth-child(odd){
background-color: red;
}
tr:nth-child(even){
background-color: gray;
}
</style>
</head>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<script>
var app =angular.module("myapp",[]).controller("myctrl",function($scope,$http){
$http.get("addr.json").then(function(success){
$scope.addr =success.data;
$scope.spro= $scope.addr[0];
$scope.scity = $scope.spro.citys[0];
})
$scope.gb =function(){
$scope.scity =$scope.spro.citys[0];
}
$scope.flag=false;
$scope.save = function(){
var name =$scope.name;
var age =$scope.age;
var tel =$scope.tel;
var riqi =new Date();
var spro = $scope.spro.province;
var scity = $scope.scity.city;
$scope.goods.push({
name :name,
age:age,
tel:tel,
riqi:riqi,
address: spro + "-" + scity,
state:"未發貨"
})
$scope.flag=false;
}
$scope.plfh =function(){
var d =false;
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked==true){
d =true;
}
}
if(d){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked==true){
$scope.goods[i].state="已發貨";
$scope.goods[i].checked=false;
$scope.qx=false;
}
}
}else{
alert("請選擇商品");
}
}
$scope.plsc =function(){
var d =false;
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked==true){
d =true;
}
}
if(d){
for (var i = 0; i < $scope.goods.length; i++) {
if($scope.goods[i].checked==true){
$scope.goods.splice(i,1)
i--;
}
}
}else{
alert("請選擇商品");
}
}
$scope.del =function(index){
$scope.goods.splice(index,1);
}
$scope.qx1 =function(){
var sk =$scope.qx;
for (var i = 0; i < $scope.goods.length; i++) {
$scope.goods[i].checked = sk;
}
}
$scope.xs=false;
$scope.xg =function(index){
$scope.xs=true;
idx =index;
$scope.name_1 =$scope.goods[index].name;
$scope.age_1 =$scope.goods[index].age;
$scope.tel_1 =$scope.goods[index].tel;
}
$scope.xg1 =function(){
$scope.goods[idx].name=$scope.name_1;
$scope.goods[idx].age=$scope.age_1;
$scope.goods[idx].tel=$scope.tel_1;
$scope.xs=false;
}
$scope.goods =[
{
name:"張三",
age:43,
tel:"13112345689",
riqi:"2017-01-02",
address:"北京-朝陽區",
state:"未發貨"
},
{
name:"張三1",
age:25,
tel:"13112345689",
riqi:"2017-01-04",
address:"上海-黃浦區",
state:"未發貨"
},
{
name:"張三2",
age:33,
tel:"13112345689",
riqi:"2017-01-05",
address:"天津-海寧區",
state:"未發貨"
}
]
})
</script>
<body ng-app="myapp" ng-controller="myctrl">
<h2>學生管理頁面</h2>
<input type="text" placeholder="請輸入按日期查詢" ng-model="data" />
<input type="button" value="批量刪除" ng-click="plsc()" />
<input type="button" value="批量發貨" ng-click="plfh()" />
<input type="button" value="入庫" ng-click="flag=true" />
<select ng-model="data1">
<option value="">---按狀態查詢---</option>
<option value="已">---已發貨---</option>
<option value="未">---未發貨---</option>
</select>
<table class="a1" cellpadding="0" cellspacing="0" border="1px">
<tr>
<td><input type="checkbox" ng-model="qx" ng-change="qx1()"></td>
<td>姓名<button ng-click="px='name';sj=!sj">排序</button></td>
<td>年齡<button ng-click="px='age';sj=!sj">排序</button></td>
<td align="center">電話<button ng-click="px='tel';sj=!sj">排序</button></td>
<td align="center">註冊日期<button ng-click="px='riqi';sj=!sj">排序</button></td>
<td align="center">地點<button ng-click="px='address';sj=!sj">排序</button></td>
<td align="center">狀態<button ng-click="px='state';sj=!sj">排序</button></td>
<td align="center">操作</td>
</tr>
<tr ng-repeat="s in goods|filter:{riqi:data,state:data1}|orderBy:px:sj">
<td><input type="checkbox" ng-model="s.checked"></td>
<td>{{s.name}}</td>
<td>{{s.age}}</td>
<td>{{s.tel}}</td>
<td align="center">{{s.riqi|date:"yyyy-MM月-dd日"}}</td>
<td>{{s.address}}</td>
<td>
<span ng-show="s.state=='已發貨'">
{{s.state}}
</span>
<span ng-show="s.state=='未發貨'" ng-click="s.state='已發貨'">
<a href="#">{{s.state}}</a>
</span>
</td>
<td align="center">
<button ng-click="del($index)">刪除</button>
<button ng-click="xg($index)">修改</button>
</td>
</tr>
</table>
<form ng-show="flag" style="margin-left: 160px;">
商品名稱<input type="text" ng-model="name"><br>
商品年齡<input type="text" ng-model="age"><br>
商品電話<input type="text" ng-model="tel"><br>
商品地點<select ng-model="spro" ng-options="pro.province for pro in addr" ng-change="gb()" ></select>
<select ng-model="scity" ng-options="ct.city for ct in spro.citys"></select>
<br />
<input type="button" ng-click="save()" value="新增"><br>
</form>
<form ng-show="xs" style="margin-left: 160px;">
商品名稱<input type="text" ng-model="name_1"><br>
商品年齡<input type="text" ng-model="age_1"><br>
商品電話<input type="text" ng-model="tel_1"><br>
<input type="button" ng-click="xg1()" value="確定修改"><br>
</form>
</body>
</html>
相關推薦
angularjs小案例
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style>.a1{width: 700px;}tr:nth-
angularJS實戰之小案例--隨機抽獎
angular.module("lottery",[]) .controller('ctrl_lottery',['$scope','$timeout',function($scope,$timeout){ //1.初始化獎品資料 $scope.items = [ {id:1
angularjs實現查詢天氣的小案例(跨域請求)
<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="
Hibernate 入門小案例
java程序 div nocache org student 包含 target .so tell 前言： 學習學到現在終於要學習框架了，心裏有點小激動呢，也不知道自己能不能學好呢，只能按著一步一個腳印的走下去，好了廢話不多說。讓我們打開hibernate
javascrip基礎以及一個計算器的小案例
defined 屬性和方法 操作 undefined logs 大小寫 數字 bst 全局 1.js的概述 js是一種腳本語言 js是可插入html頁面的編程代碼 js插入html頁面後,可由所有的瀏覽器執 2.js的基本語法 與java一樣,變量,函數名,運算符以及
JQuery基礎以及5個小案例
進行 change 遍歷 selectall 獲得 idea 獲取 設置 html 1.JQ完成定時彈出廣告 步驟分析 創建html文檔 在頁面中創建一個廣告部分的div,設置div隱藏 設置定時操作,1秒執行一個顯示的方法 設置定時操作.1秒執行一個隱藏方法 /
cookie的基礎以及小案例
腳本元素 direct his 常用 變量 所有 arr 編譯 date 1.會話技術 用戶打開一個瀏覽器訪問頁面,訪問網站的很多頁面,訪問完成後將瀏覽器關閉的過程稱為是一次會話 cookie:將數據保存到客戶端瀏覽器 session:將數據保存到服務器端 向瀏覽器保
Java小案例——對字符串進行加密解密
i++ 個數 color class 異或運算 揭秘 println scanner 英文 要求： * 對用戶輸入的每個字符的值進行加密，將解密後的字符串輸出 * 對用戶輸入的已加密字符串進行解密並輸出 實現代碼： import java.util.Sca
Java小案例——判斷所給年份是平年還是閏年
年份 平年 pre stat sca java next 用戶 string 要求： * 判斷用戶輸入的年份是平年還是閏年 實現代碼： import java.util.Scanner; /** * 要求： * 判斷用戶輸入的年份是平年還是閏年 *
JS小案例(基礎好煩惱少)----持續更新
eof 最大值 res 應該 for tin title style 最小 1 *************************************************** 2 <!DOCTYPE html> 3 <html lan
js學習總結----經典小案例之選項卡
scrip ges div 視頻內容 mil line 學習總結 images ul li <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
js學習總結----小案例之跑馬燈
htm function 微博 border ron == 內容 rip gree 具體代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
iptables filter 表小案例
filter class logs cmp input nbsp inpu forward tables 案例1：放行 21 、22 、80 端口，且 22 端口只允許 192.168.5.0/24 這個 IP 段訪問 #!/bin/bash ipt="/sbin/
關於jQ的小案例分享
src load screen borde child () length onload fun <!DOCTYPE html><html> <head> <meta charset="utf-8"> <t
Java小案例（行星移動）
println dmi dap ova gre 建議 his 矩形 graphic Java小案例 行星移動：參考：三百集 使用軟件：idea2017，java 1,圖片集：這裏 （idea圖片源放在target目錄下，才能訪問到），建議從小往上看。。。 2，定義MyFr
1）小案例步驟一
其他 com 到你 ons inter show urn ec2 database 首先： MysqlDB類： 作用： 裏面存的是mysql的操作函數，都是封裝好的。 疑問點：
Java小案例-（逃離迷宮）
class hide open isempty adl isp view rgs *** Java小案例-（逃離迷宮） 一，迷宮需求描述： 1，用戶輸入迷宮圖（限制方形）：字母1位墻，0為通，e為出口，m為入口，*為已訪問的位置，用外圍1圍住迷宮 2，運行軌跡右，左，下，上
4.10/4.11/4.12 lvm講解 4.13 磁盤故障小案例
4.10/4.11/4.12 lvm講解 4.13 磁盤故障小案例4.10/4.11/4.12 lvm講解4.13 磁盤故障小案例4.10/4.11/4.12 lvm講解lvm講解4.10 lvm講解上安裝下lvm如果忘記了 lvm包pvdisplay 查看4.11 lvm 中查看物理卷除了pvdisplay
登錄（帶驗證碼圖片）小案例
this rgb equals param dex gre type size image 1 <%@ page contentType="text/html;charset=UTF-8" language="java" %> 2 <html&g
Linux的lvm講解與磁盤故障小案例
lvml 4.10 lvm講解（上）l 4.11 lvm講解（中）l 4.12 lvm講解（下）l 4.13 磁盤故障小案例 lvm講解（上）lvm可以很方便的擴容和縮容磁盤的空間，但是有一定的局限性，一旦出現問題就比較麻煩了，例如某個磁盤使用了lvm，然後某一天文件系統發生損壞裏面的數據找不到了，這種情況第