Angularjs的增删改查

最新推荐文章于 2018-09-24 19:00:07 发布

sakurakbaby

最新推荐文章于 2018-09-24 19:00:07 发布

阅读量136

点赞数

本文链接：https://blog.csdn.net/sakurakbaby/article/details/79064464

版权

<!DOCTYPE html>
<html ng-app="App" ng-controller="Baby">
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="css/angular.min.js"></script>
       <script>
           var App=angular.module("App",[]);
           App.controller("Baby",function($scope){
               $scope.shops=[{
                   id:10000000,
                   name:"iphonex",
                   num:90
               },{
                   id:20000000,
                   name:"iphone8",
                   num:20
               },{
                   id:30000000,
                   name:"iphone7",
                   num:60
               },

               ];

               $scope.addshop=function(){
                   var flag1=false;
                   var flag2=false;
                   var flag3=false;

                   if($scope.newid==""||$scope.newid==null){
                       alert("id不能为空");
                       flag1=false;
                   }else if(isNaN($scope.newid)){
                       alert("id必须为数字");
                       flag1=false;
                   }else if($scope.newid.length<8){
                        alert("id必须为8位");
                       flag1=false;

                   }else{

                        flag1=true;

                   }
                   var flag=false;
                   for(index in $scope.shops){
                       if($scope.newname==$scope.shops[index].name){
                           flag=true;
                       }
                   }
                   if(flag){
                       alert("用户名重复");
                       flag2=false;
                   }else{
                   flag2=true;
                    }
                       if($scope.newnum==""||$scope.newnum==null){
                   alert("数量不能为空");
                   flag3=false;
               }else{
                   flag3=true;
               }

               if(flag1&&flag2&&flag3){

                   //添加
                   $scope.shops.push({
                       id:$scope.newid,
                       name:$scope.newname,
                       num:$scope.newnum
                   });
               }
               }

                  //查询
                $scope.searchName = function(){
                    var flag = false;
                    $scope.searchShow = "";
                    for(index in $scope.shops){
                        if($scope.search == $scope.shops[index].name){
                            flag = true;
                        }
                    }
                    if($scope.search == null || $scope.search == ""){
                        alert("输入框不能为空");
                        $scope.searchShow = "";
                    }else if(flag){
                        alert("商品存在");
                        $scope.searchShow = $scope.search;
                    }else{
                        alert("商品不存在");
                        $scope.searchShow = null;
                    }
                }

               //删除
               $scope.remove=function(index){

               $scope.shops.splice(index,1);
               }
               //修改
               $scope.updata=function(name){
                   var pro =window.prompt("确定要修改吗？");
                   if(pro!=null){
//                       alert(pro);
                    for (index in $scope.shops) {
                       if(name==$scope.shops[index].name){
                           $scope.shops[index].num=pro;
                       }
                    }
                   }
               }

           });
       </script>
   </head>
   <body>
       <center>
           <h3>资产登记</h3>
           资产搜索：<input ng-model="search" />
           <button ng-click="searchName()">搜索</button><br /><br />
           <table border="1px" cellspacing="0" width="500px">
               <tr>
                  <td>资产编号</td>
                  <td>资产名称</td>
                  <td>资产数量</td>
                  <td>删除</td>
                  <td>修改</td>
               </tr>
               <tr ng-repeat="shop in shops|filter:searchShow" align="center">
                  <td>{{shop.id}}</td>
                  <td>{{shop.name}}</td>
                  <td>{{shop.num}}</td>
                  <td><button ng-click="remove($index)">删除</button></td>
                  <td><button ng-click="updata(shop.name)">修改</button></td>
               </tr>

           </table><br />
            <button>入库</button><br /><br />
            <form>
               资产编号：<input type="text" ng-model="newid" /><br />
               资产名称：<input type="text" ng-model="newname" /><br />
               资产数量：<input type="text" ng-model="newnum" /><br />
               <button ng-click="addshop()">添加</button>

            </form>
       </center>
   </body>
</html>