包:
jQuery Js的类库 <script src=" http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
angula Js的类库 <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
angula-route Js的类库 <script src=" http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
ionic Js的类库
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
联网请求 (两种方式)
1.
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.success(function(a){
$scope.persons=a;//接口地址 返回的数据自动参数a
})
2.
//$http请求网络上的数据 get():请求指定路径的数据
$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
.then(function(d) { //d---->网址返回数据
// $scope.persons ==>视图中遍历的对象
$scope.persons = d.data; //json串 根据键获取值 对象.键名
});
出生日期获得
{{getAge(d.birthday)}}
//每行遍历都会调用getAge 传进来出生日期, 在函数
$scope.getAge = function(bir) {
var b = new Date(bir).getYear(); //出生的年份
var nowb = new Date().getYear();
return nowb - b;
}
商品货物练习
头部 样式 包
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>孙晶综合练习</title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<style>
table{
width: 500px;
text-align: center;
}
tr:nth-of-type(odd){
background-color: rosybrown;
}
tr:nth-of-type(even){
background-color: cornflowerblue;
}
</style>
</head>
内容
<body ng-controller="myCtrl">
<center>
<h2>商品库管理系统</h2>
<input type="text" placeholder="请输入要查询的商品" ng-model="sel" />
<button ng-click="fx()">反选</button>
<select ng-model="order">
<option value="">--排序--</option>
<option value="snum">数量排序</option>
<option value="sprice">价格排序</option>
</select>
<button ng-click="add()">添加</button>
<button ng-click="seldel()">批量删除</button>
<button ng-click="clear()">清空购物车</button>
<table>
<tr style="background-color: grey;">
<th>
<input type="checkbox" ng-model="allcb" ng-click="qx()" />
</th>
<th>货物名称</th>
<th>货物数量</th>
<th>货物单价</th>
<th>货物总价</th>
<th>操作</th>
</tr>
<tr ng-repeat="s in ss | filter:{sname:sel} | orderBy:order">
<td>
<input type="checkbox" ng-model="s.cb" />
</td>
<td>{{s.sname}}</td>
<td>
<button ng-click="jian($index)">-</button>
{{s.snum}}
<button ng-click="jia($index)">+</button>
</td>
<td>{{s.sprice | currency}}</td>
<td>{{s.snum*s.sprice | currency}}</td>
<td>
<button ng-click="del($index)">删除</button>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<font>总数:{{allsnum()}} 总价:{{allsprice()}}</font>
<div ng-show="addshow">
货物名称<input type="text" ng-model="addname" placeholder="请输入..." />
货物数量<input type="number" ng-model="addnum" placeholder="请输入..." />
货物单价<input type="number" ng-model="addprice" placeholder="请输入..." />
<button ng-click="addsub()">提交</button>
</div>
<div ng-show="upshow">
货物名称<input type="text" ng-model="upname"/>
货物数量<input type="number" ng-model="upnum"/>
货物单价<input type="number" ng-model="upprice"/>
<button ng-click="upsub()">提交</button>
</div>
</center>
</body>
功能 逻辑
---------------------------------------------------------批量删除------------------------------------------------------------------------------------
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myCtrl",function($scope){
$scope.allsnum=0;
$scope.addshow=false;
//批量删除
$scope.seldel = function(){
var arr=[];
for (var x=0;x<$scope.ss.length;x++) {
if($scope.ss[x].cb){
arr.push($scope.ss[x].sname);
}
}
//判断是否有选中的cb
if (arr.length<=0) {
alert("至少选中一条");
}else{
for (var q =0;q<arr.length;q++) {
for (var e =0;e<$scope.ss.length;e++) {
if (arr[q]==$scope.ss[e].sname) {
$scope.ss.splice(e,1);
}
}
}
}
}
----------------------------------------------------------------添加--------------------------------------------------------
//添加显示
$scope.add = function(i){
$scope.addshow=true;
}
//添加提交
$scope.addsub = function(){
if(confirm("确认添加吗")){
$scope.ss.push(
{sname:$scope.addname,snum:$scope.addnum,sprice:$scope.addprice}
);
$scope.addshow=false;
}
}
-----------------------------------------------------修改-----------------------------------------------------------------------------
//修改显示
var xg;
$scope.update = function(i){
xg=i;
$scope.upshow=true;
$scope.upname=$scope.ss[xg].sname;
$scope.upnum = $scope.ss[xg].snum;
$scope.upprice = $scope.ss[xg].sprice;
}
//修改提交
$scope.upsub = function(){
if(confirm("确认修改了吗")){
$scope.ss[xg].sname=$scope.upname;
$scope.ss[xg].snum=$scope.upnum;
$scope.ss[xg].sprice=$scope.upprice;
$scope.upshow=false;
}
}
------------------------------------------------全选 反选---------------------------------------------------------------------
//反选
$scope.fx = function(){
for (var x=0;x<$scope.ss.length;x++) {
if($scope.ss[x].cb){
$scope.ss[x].cb=false;
}else{
$scope.ss[x].cb=true;
}
}
}
// 全选
$scope.qx = function(){
if ($scope.allcb) {
//选中
for (var x=0;x<$scope.ss.length;x++) {
$scope.ss[x].cb=true;
}
} else{
//未选中
for (var x=0;x<$scope.ss.length;x++) {
$scope.ss[x].cb=false;
}
}
}
-------------------------------------------------- 一些 小功能 --------------------------------------------------------------
//删除单个商品
$scope.del = function(i){
$scope.ss.splice(i,1);
}
//数量--
$scope.jian = function(i){
$scope.ss[i].snum--;
}
//数量++
$scope.jia = function(i){
$scope.ss[i].snum++;
}
// 总数
$scope.allsnum = function(){
var all=0;
for (var x=0;x<$scope.ss.length;x++) {
all+=$scope.ss[x].snum;
}
return all;
}
// 总价
$scope.allsprice = function(){
var all2=0;
for (var x=0;x<$scope.ss.length;x++) {
all2+=$scope.ss[x].snum*$scope.ss[x].sprice;
}
return all2;
}
//清空购物车
$scope.clear = function(){
$scope.ss=[];
}
---------------------------------------------------------基础 遍历---------------------------------------------------------------------------------
// 遍历
$scope.ss=[
{sname:"谷粒多红豆奶",snum:25,sprice:4},
{sname:"葡萄果冻",snum:2,sprice:5},
{sname:"红枣酸奶",snum:6,sprice:18},
{sname:"馍干",snum:3,sprice:1}
];
################################################# 完整的一遍############################################
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>孙晶综合练习</title>
<link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js" ></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular-route/1.3.13/angular-route.js"></script>
<style>
table{
width: 500px;
text-align: center;
}
tr:nth-of-type(odd){
background-color: rosybrown;
}
tr:nth-of-type(even){
background-color: cornflowerblue;
}
</style>
</head>
<body ng-controller="myCtrl">
<center>
<h2>商品库管理系统</h2>
<input type="text" placeholder="请输入要查询的商品" ng-model="sel" />
<button ng-click="fx()">反选</button>
<select ng-model="order">
<option value="">--排序--</option>
<option value="snum">数量排序</option>
<option value="sprice">价格排序</option>
</select>
<button ng-click="add()">添加</button>
<button ng-click="seldel()">批量删除</button>
<button ng-click="clear()">清空购物车</button>
<table>
<tr style="background-color: grey;">
<th>
<input type="checkbox" ng-model="allcb" ng-click="qx()" />
</th>
<th>货物名称</th>
<th>货物数量</th>
<th>货物单价</th>
<th>货物总价</th>
<th>操作</th>
</tr>
<tr ng-repeat="s in ss | filter:{sname:sel} | orderBy:order">
<td>
<input type="checkbox" ng-model="s.cb" />
</td>
<td>{{s.sname}}</td>
<td>
<button ng-click="jian($index)">-</button>
{{s.snum}}
<button ng-click="jia($index)">+</button>
</td>
<td>{{s.sprice | currency}}</td>
<td>{{s.snum*s.sprice | currency}}</td>
<td>
<button ng-click="del($index)">删除</button>
<button ng-click="update($index)">修改</button>
</td>
</tr>
</table>
<font>总数:{{allsnum()}} 总价:{{allsprice()}}</font>
<div ng-show="addshow">
货物名称<input type="text" ng-model="addname" placeholder="请输入..." />
货物数量<input type="number" ng-model="addnum" placeholder="请输入..." />
货物单价<input type="number" ng-model="addprice" placeholder="请输入..." />
<button ng-click="addsub()">提交</button>
</div>
<div ng-show="upshow">
货物名称<input type="text" ng-model="upname"/>
货物数量<input type="number" ng-model="upnum"/>
货物单价<input type="number" ng-model="upprice"/>
<button ng-click="upsub()">提交</button>
</div>
</center>
</body>
<script>
var myApp = angular.module("myApp",[]);
myApp.controller("myCtrl",function($scope){
$scope.allsnum=0;
$scope.addshow=false;
//批量删除
$scope.seldel = function(){
var arr=[];
for (var x=0;x<$scope.ss.length;x++) {
if($scope.ss[x].cb){
arr.push($scope.ss[x].sname);
}
}
//判断是否有选中的cb
if (arr.length<=0) {
alert("至少选中一条");
}else{
for (var q =0;q<arr.length;q++) {
for (var e =0;e<$scope.ss.length;e++) {
if (arr[q]==$scope.ss[e].sname) {
$scope.ss.splice(e,1);
}
}
}
}
}
//添加显示
$scope.add = function(i){
$scope.addshow=true;
}
//添加提交
$scope.addsub = function(){
if(confirm("确认添加吗")){
$scope.ss.push(
{sname:$scope.addname,snum:$scope.addnum,sprice:$scope.addprice}
);
$scope.addshow=false;
}
}
//修改显示
var xg;
$scope.update = function(i){
xg=i;
$scope.upshow=true;
$scope.upname=$scope.ss[xg].sname;
$scope.upnum = $scope.ss[xg].snum;
$scope.upprice = $scope.ss[xg].sprice;
}
//修改提交
$scope.upsub = function(){
if(confirm("确认修改了吗")){
$scope.ss[xg].sname=$scope.upname;
$scope.ss[xg].snum=$scope.upnum;
$scope.ss[xg].sprice=$scope.upprice;
$scope.upshow=false;
}
}
//反选
$scope.fx = function(){
for (var x=0;x<$scope.ss.length;x++) {
if($scope.ss[x].cb){
$scope.ss[x].cb=false;
}else{
$scope.ss[x].cb=true;
}
}
}
// 全选
$scope.qx = function(){
if ($scope.allcb) {
//选中
for (var x=0;x<$scope.ss.length;x++) {
$scope.ss[x].cb=true;
}
} else{
//未选中
for (var x=0;x<$scope.ss.length;x++) {
$scope.ss[x].cb=false;
}
}
}
//删除单个商品
$scope.del = function(i){
$scope.ss.splice(i,1);
}
//数量--
$scope.jian = function(i){
$scope.ss[i].snum--;
}
//数量++
$scope.jia = function(i){
$scope.ss[i].snum++;
}
// 总数
$scope.allsnum = function(){
var all=0;
for (var x=0;x<$scope.ss.length;x++) {
all+=$scope.ss[x].snum;
}
return all;
}
// 总价
$scope.allsprice = function(){
var all2=0;
for (var x=0;x<$scope.ss.length;x++) {
all2+=$scope.ss[x].snum*$scope.ss[x].sprice;
}
return all2;
}
//清空购物车
$scope.clear = function(){
$scope.ss=[];
}
// 遍历
$scope.ss=[
{sname:"谷粒多红豆奶",snum:25,sprice:4},
{sname:"葡萄果冻",snum:2,sprice:5},
{sname:"红枣酸奶",snum:6,sprice:18},
{sname:"馍干",snum:3,sprice:1}
];
});
</script>
</html>