关于angularjs的绑定事件

来源：互联网发布：linux shell wait 编辑：程序博客网时间：2024/05/01 16:46

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="../angular/angular.js"></script>
       <script>
           var app=angular.module("myapp",[]);
           app.controller("myctrl",function($scope){

               //初始值
               $scope.tid="";
               $scope.tname="";
               $scope.tprice="";
               $scope.xid="";
               $scope.xname="";
               $scope.xprice="";
               $scope.ttishi=false;
               $scope.xtishi=false;

                   $scope.biao=[
                   {
                      "id":20,
                      "name":"华为",
                      "price":2888,
                      state:false
                   },
                   {
                      "id":60,
                      "name":"苹果x",
                      "price":9888,
                      state:false
                   },
                   {
                      "id":90,
                      "name":"三星",
                      "price":6888,
                      state:false
                   },
                   {
                      "id":600,
                      "name":"锤子",
                      "price":1888,
                      state:false
                   }
                   ];

               //查询
           $scope.sel="";

           //分级
           $scope.fenji="--请选择--";
           $scope.fshow=function(price){
           if($scope.fenji=="--请选择--"){
               return true;
           }
           var cs=$scope.fenji.split("-");

           if(price<cs[0]||price>cs[1]){
               return false;
           }else{
               return true;
           }
           }
           //排序
           $scope.paixu="+id";

           //全选
           $scope.cheda=false;
           $scope.cheda1=function(){
               if($scope.cheda){
                   for(x in $scope.biao){
                       $scope.biao[x].state=true;
                   }
               }else{
                   for(x in $scope.biao){
                       $scope.biao[x].state=false;
                   }
               }
           }

           //反选
           $scope.chexiao1=function(){
               var a=false;
                   for(x in $scope.biao){
                   if(!$scope.biao[x].state){
                       a=true;
                   }
                   }
               if(a){
                   $scope.cheda=false;
               }else{
               $scope.cheda=true;
               }
           }

           //批量删除
           $scope.deleteall=function(){
               var s=[];
                       for(x in $scope.biao){
                           if($scope.biao[x].state){
                               s.push($scope.biao[x].name);
                           }
                       }

                       if(s.length<=0){
                           alert("请选择");
                       }

                       for(x in s){
                          for(x2 in $scope.biao){
                           if(s[x]==$scope.biao[x2].name){
                               $scope.biao.splice(x2,1);
                           }
                          }
                       }
           }


           //单个删除
           $scope.delete=function(name){
               for(x in $scope.biao){
                   if(name==$scope.biao[x].name){
                       $scope.biao.splice(x,1);
                   }
               }
           }
           //添加
           $scope.flag=false;
           $scope.tj=function(){
               $scope.flag2=false;
               if($scope.flag){
                   $scope.flag=false;
               }else{
                   $scope.flag=true;
               }
           }

           //修改
           $scope.flag2=false;
           $scope.update=function(l){
               $scope.flag=false;
               $scope.flag2=true;

               $scope.xid=l.id;
               $scope.xname=l.name;
               $scope.xprice=l.price;
           }

           //添加   验证
           $scope.zu=[];
           $scope.tbaocun=function(){
                  $scope.zu=[];
               if($scope.tid==""){
               $scope.zu.push("id不能为空");
               }else{
                   if(isNaN($scope.tid)){
               $scope.zu.push("id必须为数字");
               }
               }
               if($scope.tname==""){
               $scope.zu.push("名字不能为空");
               }
               if($scope.tprice==""){
               $scope.zu.push("价格不能为空");
               }else{
                   if(isNaN($scope.tprice)){
               $scope.zu.push("价格必须为数字");
               }
               }
               if( $scope.zu.length>0){
                   $scope.ttishi=true;
               }else{
                   $scope.ttishi=false;
                   var k={
                      "id":parseInt($scope.tid),
                      "name":$scope.tname,
                      "price":parseInt($scope.tprice),
                      state:false
                   }
                   $scope.biao.push(k);
               }
           }

           //修改   验证
           $scope.zu2=[];
           $scope.xbaocun=function(){
                  $scope.zu2=[];

               if($scope.xname==""){
               $scope.zu2.push("名字不能为空");
               }
               if($scope.xprice==""){
               $scope.zu2.push("价格不能为空");
               }else{
                   if(isNaN($scope.xprice)){
               $scope.zu2.push("价格必须为数字");
               }
               }
               if( $scope.zu2.length>0){
                   $scope.xtishi=true;
               }else{
                   $scope.xtishi=false;
                      for(x in $scope.biao){
                          if($scope.xid==$scope.biao[x].id){
                              $scope.biao[x].name=$scope.xname;
                              $scope.biao[x].price=parseInt($scope.xprice);
                          }
                      }
               }
           }

           });
       </script>
       <style>
           table tr:nth-child(odd){
               background-color: cornflowerblue;
           }
           table tr:nth-child(even){
           background-color: burlywood;
           }
       </style>
   </head>
   <body ng-app="myapp" ng-controller="myctrl">
   <center>
           查询<input type="text" ng-model="sel">
       分级<select ng-model="fenji">
           <option>--请选择--</option>
           <option>0-2001</option>
           <option>2001-4001</option>
           <option>4001-6001</option>
           <option>6001-8001</option>
           <option>8001-15001</option>
       </select>
       排序<select ng-model="paixu">
           <option value="+id">排序方式</option>
           <option value="+id">id正序</option>
           <option value="-id">id逆序</option>
           <option value="+price">价格正序</option>
           <option value="-price">价格逆序</option>
       </select>
       <button ng-click="deleteall()">批量删除</button><br />


       <table border="1px solid" cellpadding="10px" cellspacing="0px">
           <thead>
               <tr style="background-color: #8F8F8F;">
                   <td><input type="checkbox" ng-model="cheda" ng-click="cheda1()"></td>
                   <td>产品编号</td>
                   <td>产品名称</td>
                   <td>产品价格</td>
                   <td>操作</td>
               </tr>
           </thead>

           <tbody>
               <tr ng-repeat="x in biao | filter:{'name':sel} | orderBy:paixu" ng-show="fshow(x.price)" onmouseover="this.style.cursor='hand'">
                   <td><input type="checkbox" ng-model="x.state" ng-click="chexiao1()"></td>
                   <td>{{x.id}}</td>
                   <td>{{x.name}}</td>
                   <td>{{x.price}}</td>
                   <td>
                       <button ng-click="delete(x.name)">删除</button>
                       <button ng-click="update(x)">修改</button>
                   </td>
               </tr>
           </tbody>

       </table><br />
       <button ng-click="tj()">添加</button>
       <div ng-show="flag" style="border:1px solid;" >
           <h4>添加界面</h4>
           id:<input type="text" ng-model="tid"><br />
           姓名:<input type="text" ng-model="tname"><br />
           价格:<input type="text" ng-model="tprice"><br />
           <button ng-click="tbaocun()">保存</button><br />
               <div ng-show="ttishi">
           <ul>
               <li ng-repeat="x in zu">{{x}}</li>
           </ul>
           </div>
       </div>

       <div ng-show="flag2" style="border:1px solid;" >
           <h4>修改界面</h4>
           id:<input type="text" disabled="disabled" ng-model="xid"><br />
           姓名:<input type="text" ng-model="xname"><br />
           价格:<input type="text" ng-model="xprice"><br />
           <button ng-click="xbaocun()">保存</button><br />
           <div ng-show="xtishi">
           <ul>
               <li ng-repeat="x in zu2">{{x}}</li>
           </ul>
           </div>
       </div>

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

阅读全文

0 0