AngularJs批量删除+修改

<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="paixu">
        <option value="">选择</option>
        <option value="age">正序</option>
        <option value="-age">倒序</option>
    </select>
    <input type="button" name="" id="" value="批量删除" ng-click="deleAll()" />

    <table border="" cellspacing="" cellpadding="">
        <tr ng-repeat="person in arr|orderBy:paixu">
            <td><input type="checkbox" ng-model="person.state" /></td>
            <td>{{person.name}}</td>
            <td>{{person.age}}</td>
            <td><input type="button" value="修改" ng-click="show($index,person.name,person.age)" /></td>
        </tr>
    </table>

    <div class="div1" ng-show="isShow">
        名字：<input type="text" ng-model="name12" /><br> 年龄:
        <input type="text" ng-model="age12" />
        <br>
        <input type="button" name="" id="" value="提交" ng-click="save()" />
    </div>

    <script type="text/javascript">
        var mo = angular.module("myApp", []);
        mo.controller("myCtrl", function($scope, $http) {

            $http.get("demo.json").then(function(res) {

                $scope.arr = res.data;

            });

            $scope.deleAll = function() {
                for(var i = $scope.arr.length - 1; i >= 0; i--) {
                    var p = $scope.arr[i];
                    console.log(p + "---")
                    if(p.state) {
                        $scope.arr.splice(i, 1);
                    }
                }
            }
            var i_temp = 0;
            //显示修改页面
            $scope.show = function(index, name, age) {
                i_temp = index;
                $scope.isShow = true;
                //将数据，填入修改页面
                $scope.name12 = name;
                $scope.age12 = age;
            }

            $scope.save = function() {
                //取值
                var name = $scope.name12;
                var age = $scope.age12;
                //创建对象
                var obj = {
                    "name": name,
                    "age": age
                };
                //将原来的数据替换
                $scope.arr.splice(i_temp, 1, obj);
            }

        });
    </script>
</body>
AngularJs批量删除+修改

猜你喜欢
