<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>
AngularJs添加,删除,批量删除,全选,反选
最新推荐文章于 2020-04-20 17:30:57 发布