Angular JS 列表修改
阿新 • • 發佈：2018-11-27
.yellowline{
background-color: yellow;
}
.redline{
background-color: red;
}
查詢:
排序：
–請選擇–
–名稱正序–
–名稱倒序–
–價格正序–
–價格倒序–
</div> <div ng-show="showAdd"> <ul style="list-style: none;"> <li>商品編號： <input type="text" name="" id="" value="" ng-model="asid" /> </li> <li>商品名稱： <input type="text" name="" id="" value="" ng-model="aname" /> </li> <li>商品價格： <input type="text" name="" id="" value="" ng-model="aprice" /> </li><li>商品產地： <input type="text" name="" id="" value="" ng-model="aproduct" /> </li> <li> <input type="button" id="" value="新增" ng-click="addShop()" /> </li> </ul> </div> <div> <input type="button" id="" value="批量刪除" ng-click="delMore()" /> </div> <table border="1" cellspacing="0" cellpadding="1" width="50%" style="text-align: center;" ng-show="isShowTable"> <tr style="background-color: gray;"> <th><input type="checkbox" name="" id="" value="" ng-model="checkAll"/></th> <th>序號</th> <th>id</th> <th>商品名稱</th> <th>價格</th> <th>產地</th> <th>操作</th> </tr> <!--|filter:{name:searchKey} 按照商品名過濾 |filter:searchKey 所有欄位都可以過濾 --> <tr ng-repeat="x in shops|filter:searchKey|orderBy:orderbyKey" class="{{$index%2==0?'redline':'yellowline'}}"> <td><input type="checkbox" name="" id="" value="{{x.sid}}" ng-model="checkAll" /></td> <td>{{$index}}</td> <td>{{x.sid}}</td> <td>{{x.name}}</td> <td>{{x.price}}</td> <td>{{x.product}}</td> <td> <input type="button" id="" value="刪除" ng-click="del($index)" /> <input type="button" id="" value="修改" ng-click="modify(x.sid)"/> </td> </tr> </table> <div ng-show="showModify"> <ul style="list-style: none;"> <li>商品名稱： <input type="text" name="" id="" value="" ng-model="mname" /> </li> <li>商品價格： <input type="text" name="" id="" value="" ng-model="mprice" /> </li><li>商品產地： <input type="text" name="" id="" value="" ng-model="mproduct" /> </li> <li> <input type="button" id="" value="修改" ng-click="modifyShop()" /> </li> </ul> </div> </center> <script type="text/javascript"> var app=angular.module("myapp",[]); app.controller("myctrl",function($scope){ //初使化 是 “請選擇” $scope.orderbyKey="0"; //是否隱藏列表 $scope.isShowTable=true; //是否隱藏添加布局 $scope.showAdd=false; //是否隱藏修改佈局 $scope.showModify=false; //初使化列表資料 $scope.shops=[{sid:"001",name:"小米",price:3400,product:"北京"},{sid:"002",name:"華為",price:5400,product:"上海"},{sid:"003",name:"vivo",price:8000,product:"北京"},{sid:"004",name:"oppo",price:2300,product:"北京"}]; //定義刪除方法 $scope.del=function(id){
// for (var i = 0; i < scope.shops.splice(id,1);
// if(
scope.isShowTable=false;
// }
}
//定義批量刪除的方法
$scope.delMore=function(){
//得到選中的checkbox
var cbs=$("input:checked");
cbs.each(function(){
// alert(
scope.shops.length; i++) {
if(
(this).val()){
$scope.shops.splice(i,1);
break;
}
}
});
if($scope.shops.length==0){
//隱藏列表
$scope.isShowTable=false;
}
}
//顯示或隱藏添加布局
//
scope.showAdd==true){
//
scope.showAdd=true;
// }
// }
//新增商品
$scope.addShop=function(){
var newShop={};
newShop.sid=$scope.asid;
newShop.name=$scope.aname;
newShop.price=$scope.aprice;
newShop.product=$scope.aproduct;
//新增到集合中
$scope.shops.push(newShop);
//隱藏添加布局
$scope.showAdd=false;
//清空資料
$scope.asid="";
$scope.aname="";
$scope.aprice="";
$scope.aproduct="";
}
//定義一個全域性變數
var modifyData;
//修改
$scope.modify=function(sid){
//顯示
$scope.showModify=true;
for (var i = 0; i < $scope.shops.length; i++) {
if($scope.shops[i].sid==sid){
modifyData=$scope.shops[i];
break;
}
}
//賦值
$scope.mname=modifyData.name;
$scope.mprice=modifyData.price;
$scope.mproduct=modifyData.product;
}
//真正修改資料
$scope.modifyShop=function(){
modifyData.name=$scope.mname;
modifyData.price=$scope.mprice;
modifyData.product=$scope.mproduct;
//隱藏
$scope.showModify=false;
}
});
</script>
</body>