angular 根据checked进行删除过滤增删

最新推荐文章于 2018-03-31 09:49:30 发布

原创最新推荐文章于 2018-03-31 09:49:30 发布 · 189 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一个使用AngularJS框架实现的学生信息管理系统案例。该系统具备添加、删除学生信息、批量操作及根据姓名查询等功能，并实现了数据排序、筛选和表格编辑等交互效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script src="js/angular.min.js"></script>
       <script>
           var app=angular.module("gaoyn",[]);
           app.controller("democ",function($scope){
               $scope.px='level';
               $scope.sj=true;
               $scope.stus = [{
                   ck:false,
                   name: '张三',
                   sex: '男',
                   sal: 10000,
                   level:1
               }, {
                   ck:true,
                   name: '李四',
                   sex: '男',
                   sal: 18000,
                   level:2
               }, {
                   ck:false,
                   name: '王四',
                   sex: '男',
                   sal: 18000,
                   level:20
               }, {
                   ck:false,
                   name: '张四',
                   sex: '男',
                   sal: 18000,
                   level:5
               }];

               $scope.count=function(num,sname){
                   //根据索引查找对象---->对象的level级别
                   console.log("根据索引查找的对象",$scope.stus[i]);
                   for(var i=0;i<$scope.stus.length;i++){
                       if($scope.stus[i].name==sname){
                           $scope.stus[i].level=$scope.stus[i].level+num;
                       }
                   }
               }

               //计算所有人工资的方法;在控制器中定义方法
               $scope.sum = function() {
                   var count = 0;
                   for(var i in $scope.stus) {
                       count = count + $scope.stus[i].sal*$scope.stus[i].level;
                   }
                   return count;
               }
               //批量删除
               $scope.delAll=function(){
                   var count=0;

                   //遍历数组
                   for(var i=0;i<$scope.stus.length;i++){
                       if($scope.stus[i].ck){
                           count++;
                           $scope.stus.splice(i,1);
                           i--;
                       }
                   }

                   if(count==0){
                       alert("请选择!");
                   }

               }
               $scope.ckAll=function(){
                   for(var i=0;i<$scope.stus.length;i++){
                       $scope.stus[i].ck=$scope.flag;
                   }
               }

           });
       </script>
   </head>
   <body ng-app="gaoyn" ng-controller="democ">
       
       <button ng-click="add()">添加学生</button>
         根据姓名查询:<input type="text" ng-model="selname" />

         <button ng-click="delAll()">批量删除</button>
       
       <table border="1px">
           <tr>
               <td><input type="checkbox" ng-click="ckAll()" ng-model="flag" /></td>
               <td>序号</td>
               <td>姓名</td>
               <td>性别</td>
               <td ng-click="px='sal'; sj=!sj">工资</td>
               <td ng-click="px='level'; sj=!sj">级别</td>
               <td>小计</td>
           </tr>
           <tr ng-repeat="s in stus|orderBy:px:sj|filter:{name:selname}">
               <td><input type="checkbox" ng-model="s.ck"/> </td>
               <td>{{$index}}</td>
               <td>
                   <span ng-click="f=true"> {{s.name}} </span>
                   <span ng-show="f">
                       <input ng-model="s.name" /> <button ng-click="f=false">保存</button>
                   </span>
                   </td>
               <td>
                   <span ng-click="f1=true">
                       {{s.sex}}
                   </span>
                   <span ng-show="f1">
                          <input ng-model="s.sex" />
                       <button ng-click="f1=false"> 保存</button>
                   </span>


               </td>
               <td>{{s.sal}}</td>
               <td><button ng-click="count(+1,s.name)">+</button> <input style="width: 30px;" ng-model="s.level" /><button ng-click="count(-1,s.sname)">－</button> </td>
               <td>{{s.level*s.sal}}</td>
           </tr>
       </table>
       总价:{{sum()}}
   </body>
</html>