<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../Anglert/angular.min.js" ></script>
<script>
var app=angular.module("Myapp",[]);
var goods=[{"id":165,"name":"dfddf","price":5414,"done":false},
{"id":455,"name":"fddh","price":2123,"done":false},
{"id":184,"name":"ghgh","price":7415,"done":false},
{"id":191,"name":"cvcd","price":9999,"done":false}];
app.controller("Myctrl",function($scope){
$scope.gds=goods;
//批量刪除
$scope.delall=function(){
var goodNames=[];
for(index in $scope.gds){
if($scope.gds[index].done==true){
goodNames.push($scope.gds[index].name);
}
}
if(goodNames.length>0)
{
if(confirm("是否刪除選中項")){
for(i in goodNames)
{
var names=goodNames[i];
for(i2 in $scope.gds)
{
if($scope.gds[i2].name==names)
{
$scope.gds.splice(i2,1);
}
}
}
}
}else{
alert("請刪除選項");
}
}
//單獨刪除
$scope.delone=function(names){
if(confirm("確定刪除嗎")){
for(index in $scope.gds)
{
if(names==$scope.gds[index].name){
$scope.gds.splice(index,1);
}
}
}
}
$scope.fuhao="";
$scope.shuxing="";
$scope.zfpai=function(sx){
$scope.shuxing=sx;
if($scope.fuhao=="")
{
$scope.fuhao="-";
}else{
$scope.fuhao="";
}
}
//全選
$scope.checkall=function(){
if($scope.cheall==true){
for(var i=0;i<$scope.gds.length;i++){
$scope.gds[i].done=true;
}
}else{
for(var i=0;i<$scope.gds.length;i++){
$scope.gds[i].done=false;
}
}
}
//修改
$scope.xiugai = function(price) {
//獲得價格
for(index in $scope.gds) {
if(price == $scope.gds[index].price) {
var tan=window.prompt("清輸入要修改的價格", price)
if(!tan=="NaN" ||!tan==""){
var result = parseInt(tan);
//在這之前對result的結果進行非字符串判斷
if(result < 0) {
alert("輸入有誤，請重新更改");
} else {
if(window.confirm("確定要將" + $scope.gds[index].name + "的價格更改爲：" + result + "嗎？")) {
$scope.gds[index].price = result;
}
}
}
}
}
}
//下拉菜單篩選
$scope.xuzhe="-請選擇-";
$scope.fun=function(priced){
if($scope.xuzhe=="-請選擇-"){
return true;
}else{
var arr=$scope.xuzhe.split("-");
var pricemin=arr[0];
var pricemax=arr[1];
//alert(pricemin);
//alert(pricemax);
if(priced>pricemax||priced<pricemin){
return false;
}else{
return true;
}
}
}
//定義下拉菜單排序規則
$scope.selOrder;
$scope.orderSel=function(){
if($scope.selOrder == "id") {
$scope.fuhao = "";
$scope.shuxing = "id";
} else if($scope.selOrder == "-id") {
$scope.fuhao = "-";
$scope.shuxing = "id";
} else if($scope.selOrder == "price") {
$scope.fuhao = "";
$scope.shuxing = "price";
} else if($scope.selOrder == "-price") {
$scope.fuhao = "-";
$scope.shuxing = "price";
};
}
//反選
$scope.checkselectall=function(){
var flag=false;
for(index in $scope.gds)
{
if(!$scope.gds[index].done){
flag=true;
}
}
if(flag)
{
$scope.cheall=false;
}else{
$scope.cheall=true;
}
}
});
</script>
</head>
<body ng-app="Myapp" ng-controller="Myctrl">
<center>
<input type="text" placeholder="請輸入關鍵字" ng-model="gjz" />
<select ng-model="xuzhe" >
<option>-請選擇-</option>
<option>1000-2000</option>
<option>2000-4000</option>
<option>4000-6000</option>
<option>7000-10000</option>
<option>10000-12000</option>
</select>
正反排序<select ng-model="selOrder" ng-change="orderSel()">
<option value="">排序方式</option>
<option value="id">id正序</option>
<option value="-id">id逆序</option>
<option value="price">價格正序</option>
<option value="-price">價格逆序</option>
</select>
<button ng-click="delall()">批量刪除</button>
<br /><br />
<table border="1px solid blue" cellpadding="10px" cellspacing="0px">
<thead>
<tr>
<td><input type="checkbox" ng-click="checkall()" ng-model="cheall"/></td>
<td ng-click="zfpai('id')">編號</td>
<td ng-click="zfpai('name')">名稱</td>
<td ng-click="zfpai('price')">價格</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr ng-repeat="good in gds|filter:{'name':gjz}|orderBy:(fuhao+shuxing)" ng-if="fun(good.price)" >
<td><input type="checkbox" ng-model="good.done" ng-click="checkselectall()"/></td>
<td>{{good.id}}</td>
<td>{{good.name}}</td>
<td>{{good.price}}</td>
<td><button ng-click="delone(good.name)">刪除</button><button ng-click="xiugai(good.price)">修改</button></td>
</tr>
</tbody>
</table>
</center>
</body>
</html>
練習題(查,刪,排,改)
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章