angularJs中表格如何實(shí)現(xiàn)添加刪除修改查詢方法

發(fā)布時(shí)間：2021-07-22 14:20:34 來源：億速云閱讀：131 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關(guān)angularJs中表格如何實(shí)現(xiàn)添加刪除修改查詢方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="agl/angular.min.js"></script>
 <script>
  var app=angular.module("mpp",[]);
  app.controller("ctrl",function ($scope) {
   $scope.arr=[];
   $scope.add=function () {
    $scope.arr.push({name:$scope.name,password:$scope.password,age:$scope.age,sex:$scope.sex})
   }
   $scope.submit=function () {
    for (var i=0;i<$scope.arr.length;i++)
    {
     if($scope.arr[i].name==$scope.name2)
     {
     if($scope.arr[i].password==$scope.pass)
     {
      if($scope.pass2==$scope.pass){
       $scope.arr[i].password=$scope.pass2;
      }else{
       alert("兩次輸入不一致");
      }
     }else {
      alert("密碼錯(cuò)誤");
     }
     }else {
      alert("用戶名錯(cuò)誤");
     }
    }
   }
   $scope.flag=false;
   $scope.show=function () {
    $scope.flag=true;
   }
  })
 </script>
 <link rel="stylesheet" href="css/style.css" rel="external nofollow" >
</head>
<body ng-app="mpp" ng-controller="ctrl">
<div class="inner">
 <input type="text" placeholder="用戶名查詢" ng-model="user">
 <input type="text" placeholder="年齡范圍查詢" ng-model="ages">
 <select ng-model="sexs">
  <option value="男">男</option>
  <option value="女">女</option></select>
 <button>全部刪除</button>
 <TABLE>
  <tr>
   <th>Id</th>
   <th>用戶名</th>
   <th>密碼</th>
   <th>年齡</th>
   <th>性別</th>
   <th>操作</th>
  </tr>
  <tr ng-repeat="item in arr|filter:{name:user}|filter:{age:ages}|filter:{sex:sexs}">
   <td>{{$index+1}}</td>
   <td>{{item.name}}</td>
   <td>{{item.password}}</td>
   <td>{{item.age}}</td>
   <td>{{item.sex}}</td>
   <td><button ng-click="show()">修改密碼</button></td>
  </tr>
 </TABLE>
 <button ng-click="add()">添加用戶</button>
 <div class="conner">
 <div class="add">
  用戶名：<input type="text" ng-model="name"><br>
  密 碼：<input type="password" ng-model="password"><br>
  年 齡：<input type="text" ng-model="age"><br>
  性 別：<select ng-model="sex">
  <option value="男">男</option>
  <option value="女">女</option></select><br>
 </div>
 <div class="update" ng-show="flag">
  用戶名：<input type="text" ng-model="name2"><br>
  舊密碼：<input type="text" ng-model="pass"><br>
  新密碼：<input type="password" ng-model="pass2"><br>
  確認(rèn)密碼：<input type="password" ng-model="pass3"><br>
 </div>
 </div>
 <button ng-click="submit()">提交</button>
</div>
</body>
</html>

css

*{

 margin: 0;
 padding: 0;
}
.inner{
 margin: 20px auto;
 text-align: center;
}
table{
 margin: 10px auto;
 text-align: center;
}
tr{
 border-collapse: collapse;
}
tr th,td{
 border:1px solid #000000;
 width: 60px;
}
.conner{
 width: 600px;
 height: 300px;
 background: #ffe7e0;
 margin: 0 auto;
}
.add{
 margin: 10px auto;
 padding-top: 20px;
 width: 260px;
 height: 120px;
 border: 2px solid #e42112;
}
.update{
 width: 280px;
 height: 120px;
 border: 2px solid #e42112;
 text-align: center;
 margin: 10px auto;
 padding-top: 20px;
}

感謝各位的閱讀！關(guān)于“angularJs中表格如何實(shí)現(xiàn)添加刪除修改查詢方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

向AI問一下細(xì)節(jié)

angularJs中表格如何實(shí)現(xiàn)添加刪除修改查詢方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽