<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<!--
先導入庫
配置環境
//頁面
-->
<script src="js/angularjs1.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
document.addEventListener('plusready', function() {
//console.log("所有plus api都應該在此事件發生後調用,否則會出現plus is undefined。"
});
</script>
<style type="text/css">
* {
margin: 0px;
padding: 0px;
}
.title {
height: 40px;
width: 100%;
background: blue;
color: white;
text-align: center;
line-height: 40px;
}
table {
width: 100%;
}
td {
border-bottom: 1px solid black;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<!--頁面-->
<div class="main">
<div class="title">
商品比價清單
</div>
<input type="text" ng-model="gname" placeholder="根據商品名查詢" />
<select ng-model="by">
<option value="">請選擇</option>
<option value="ctime">時間正序</option>
<option value="-ctime">時間倒序</option>
</select>
<input type="button" value="全選" ng-click="quan()" />
<input type="button" value="反選" ng-click="fan()" />
<input type="button" value="批量删除" ng-click="deleAll()" />
<table border="0px" cellspacing="0" cellpadding="0">
<!--
-->
<tr ng-repeat="good in goods|filter:gname|orderBy:by">
<td><input type="checkbox" ng-model="good.ck" /></td>
<td><img src="{{good.picUrl}}" /></td>
<td>
<div>
{{good.title}}
</div>
<div>
來源:{{good.description}}
</div>
<div>
時間:{{good.ctime|date:"yyyy-MM-dd"}}
</div>
</td>
<td>
<input type="button" name="" id="" value="删除" ng-click="dele(good.title)" />
</td>
</tr>
</table>
</div>
<!--添加頁面-->
<center>
<div class="add_view">
<span>
添加頁面
</span>
<br> 标題:
<input type="text" ng-model="title12" /><br> 來源:
<input type="text" ng-model="des12" /><br> 時間:
<input type="text" ng-model="time12" /><br>
<input type="button" name="" id="" value="送出" ng-click="add()" />
</div>
</center>
<script type="text/javascript">
var moudle = angular.module("myApp", []);
moudle.controller("myCtrl", function($scope, $http) {
//使用服務進行網絡請求
$http.get("goods.json").then(function(res) {
$scope.goods = res.data;
});
// $scope.goods =
//全選
/**
* 将對象裡面的變量ck全部隻為true
*
*/
$scope.quan = function() {
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
g.ck = true;
}
}
//反選
$scope.fan = function() {
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
g.ck = !g.ck;
}
}
//批量删除
$scope.deleAll = function() {
for(var i = $scope.goods.length - 1; i >= 0; i--) {
var g = $scope.goods[i];
if(g.ck) {
$scope.goods.splice(i, 1);
}
}
}
//單個删除 --根據标題,千萬不要根據索引
$scope.dele = function(title) {
for(var i = 0; i < $scope.goods.length; i++) {
var g = $scope.goods[i];
if(g.title == title) {
$scope.goods.splice(i, 1);
}
}
}
$scope.add = function() {
var title = $scope.title12;
var des = $scope.des12;
var time = $scope.time12;
//建立對象,将資料放入對象
var obj = {
"ctime": time,
"title": title,
"description": des,
"picUrl": "http://d.ifengimg.com/w145_h103/p0.ifengimg.com/pmop/2018/0910/D739C5CDA092C4CEFA16E800B88ACC3A6494D30D_size24_w640_h427.jpeg",
"url": "http://sports.ifeng.com/a/20180911/60050282_0.shtml"
}
//加入數組
$scope.goods.push(obj);
}
});
</script>
</body>