h2月
<html ng-app="App">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.css1{
background-color: yellow;
}
.css2{
background-color: red;
}
</style>
</head>
<body ng-controller="Dem">
<div>
<input type="text" placeholder="請輸入要查詢的商品名稱" ng-model="search" />
<button ng-click="deleteAll()">批量刪除</button>
</div>
<table border="2" bordercolor="pink">
<tr>
<td> <input type="checkbox" ng-click="allXuan()" ng-model="selectAll" /></td>
<td>產品編號</td>
<td>產品名稱</td>
<td>購買數量</td>
<td>產品單價</td>
<td>產品總價</td>
<td>操作</td>
</tr>
<tr ng-repeat="x in Product" class="{{$even ? 'css1':'css2'}}">
<td><input type="checkbox" ng-model="x.state"/></td>
<td>{{x.id}}</td>
<td>{{x.name}}</td>
<td>
<button ng-click="jian($index)">-</button>
<input type="number" value="{{x.numss}}" />
<button ng-click="add($index)">+</button>
</td>
<td>{{x.price}}</td>
<td>{{x.numss*x.price}}</td>
<td><input type="button" ng-click="rmove($index)" value="刪除"/></button></td>
</tr>
</table>
<div>
<span>總價:</span> <span>{{totalPrices()}}</span>
<span>數量:</span> <span>{{numAll()}}</span>
</div>
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
//初始化-------
var App = angular.module("App",[]);
App.controller("Dem",function($scope){
//給Product定義數據
$scope.Product = [{
id: 1000,
name: "iPhone8",
numss: 1,
price: 8888,
state:false
}, {
id: 1001,
name: "iPhone9",
numss: 1,
price: 9888,
state:false
}, {
id: 1002,
name: "iPhone2s",
numss: 1,
price: 3888,
state:false
}, {
id: 1003,
name: "iPhone7P",
numss: 1,
price: 10088,
state:false
}];
//加減的方法
$scope.add = function(index){
$scope.Product[index].numss++;
}
$scope.jian = function(index){
if($scope.Product[index].numss>=1){
$scope.Product[index].numss--;
}
}
//刪除的方法
$scope.rmove = function(index){
if(confirm("確定刪除嗎？")){
$scope.Product.splice(index,1);
}
}
//總價的方法
$scope.totalPrices = function(){
var totalPrices = 0;
for(var x=0;x<$scope.Product.length;x++){
totalPrices+= $scope.Product[x].numss*$scope.Product[x].price;
}
return totalPrices;
}
$scope.numAll = function(){
var aaa = 0;
for(var x=0;x<$scope.Product.length;x++){
aaa+=$scope.Product[x].numss;
}
return aaa;
}
//批量刪除的
$scope.deleteAll = function(){
var arr= [];
for(var x=0;x<$scope.Product.length;x++){
//如果checkbox的狀態是true 那就是他被選中了
if($scope.Product[x].state){
arr.push($scope.Product[x].name);
}
}
if(arr.length<=0){
confirm("請選中在刪除");
}else{
//如果數組的長度大於0 那就直接刪除
for(index in arr){
for(index1 in $scope.Product){
if(arr[index] == $scope.Product[index1].name){
$scope.Product.splice(index1,1);
}
}
}
}
}
//全選的操作
var selectAll = false;
$scope.allXuan = function(){
if($scope.selectAll){
for (index in $scope.Product){
$scope.Product[index].state = true;
}
}else{
for (index in $scope.Product){
$scope.Product[index].state = false;
}
}
}
});
</script>
</body>
</html>
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.