您的位置：首页 > Web前端 > AngularJS

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

2018-01-09 20:37 447 查看
<!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">

        <!-- ng-click调用的是控制器的方法  onclick JavaScript原始的定义方法 -->

        <button ng-click="add()">添加学生</button>

         根据姓名查询:<input type="text" ng-model="selname" />

         

         <button ng-click="delAll()">批量删除</button>

        <!--ng-modle  用在form表单的类型标签,把value的值自动赋值给stu   -->

        <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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航