angular

最新推荐文章于 2021-05-27 23:03:22 发布

android _萧瑟的秋风@

最新推荐文章于 2021-05-27 23:03:22 发布

阅读量213

点赞数

文章标签： Angular

本文链接：https://blog.csdn.net/zxcce21/article/details/81239748

版权

</head>
<body ng-app="myapp" ng-controller="mystrl">
    <input type="button" id="" value="入库/添加" ng-click="isshow=!isshow" />
       <ul ng--show="isshow">
        <li>商品名称<input type="text" id="" value="" placeholder="请输入商品名称" ng-model="aname" /></li>
        <li>商品价格<input type="text" id="" value="" placeholder="请输入商品价格" ng-model="aprice" /></li>
        <li>商品产地<input type="text" id="" value="" placeholder="请输入商品产地" ng-model="aproduct" /></li>
        <li><input type="button" id="" value="添加"  ng-click="add()"/></li>
       </ul>
       <table border="1px" cellpadding="5px" cellspacing="0">

        <tr>
            <td>序号</td>
            <td>编号</td>
            <td>商品名称</td>
            <td>商品价格</td>
            <td>商品数量</td>
            <td>商品小计</td>
            <td>商品产地</td>
            <td>产地</td>
        </tr>
          <tr ng-repeat="x in movie">
            <td>{{$index}}</td>
            <td>{{x.id}}</td>
            <td>{{x.name}}</td>
            <td>{{x.price}}</td>
            <td><input type="button" id="shu" value="-" ng-click="x.num=jian(x.num,$index)"/>
            <input type="text" id="" value="{{x.num}}" ng-model="x.num"/>
            <input type="button" id="" value="+" ng-click="x.num=jia(x.num)"/></td>
            <td>{{x.price*x.num}}</td>
            <td>{{x.product}}</td>
            <td>
                <input type="button" id="" value="删除" ng-click="del(x.id)"/>
                <input type="button" id="" value="修改"  ng-click="up(x.id)"/>
            </td>
          </tr>
       </table>

       <p>总计：{{money()}}元</p>
       <ul ng--show="isupdate">
        <li>商品名称<input type="text" id="" value="" ng-model="bname" /></li>
        <li>商品价格<input type="text" id="" value="" ng-model="bprice" /></li>
        <li>商品产地<input type="text" id="" value=""  ng-model="bproduct" /></li>
        <li><input type="button" id="" value="修改" ng-click="update()"  /></li>
       </ul>

       <script>
       var app =    angular.module("myapp",[]);
       app.controller("mystrl",function($scope,$http){
        $scope.isupdate=false
          $http.get("aa.json")
          .then(
            function(response){
                $scope.movie=response.data
            }
          );

          $scope.money=function(){
            var sum=0;
            for (var i = 0; i < $scope.movie.length; i++) {
                sum+=$scope.movie[i].price*$scope.movie[i].num;
            }
            return sum;
          };
          $scope.del=function(aid){
             if(confirm("是否确认删除？")){
                for (var i = 0; i < $scope.movie.length; i++) {
                    if($scope.movie[i].id==aid){
                        $scope.movie.splice(i,1)
                    }
                }
             }
          };

          $scope.jia=function(m){
             return m+=1;
          }
          $scope.jian=function(m,index){
             m-=1;
            if(m<1){
                $scope.movie.splice(index,1);
            }else{
                return m;
            }
          };
          var change="";
          $scope.up=function(aid){
            $scope.isupdate=true;
               for (var i = 0; i < $scope.movie.length; i++) {
                if($scope.movie[i].id==aid){
                    change=$scope.movie[i];
                    $scope.bname=$scope.movie[i].name;
                    $scope.bprice=$scope.movie[i].price;
                    $scope.bproduct=$scope.movie[i].product;
                }
               }
          };





          $scope.update=function(){
            change.name=$scope.bname;
            change.price=$scope.bprice;
            change.product=$scope.bproduct;
            $scope. isupdate=false;
          }
          $scope.add=function(){
            var newsmovie={};
            newsmovie.name=$scope.aname;
            newsmovie.price=$scope.aprice;
            newsmovie.product=$scope.aproduct;
            $scope.movie.push(newsmovie);
          }






       });

       </script>
</body>