在AngularJs中更新表格的示例

Updating table in a sample crud example in AngularJs

本文关键字：表格 更新 AngularJs      更新时间：2023-09-26

我是AngularJs的新手，在构建我的第一个CRUD示例时，我在更新函数中遇到了一个问题;除更新功能外，其他功能均正常。

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Angular Sort and Filter</title>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootswatch/3.2.0/sandstone/bootstrap.min.css">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
    <style>
    body {
        padding-top: 50px;
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body>
    <div class="container" ng-app="sortApp" ng-controller="mainController">
        <table class="table table-bordered table-striped">
            <thead>
                <tr>
                    <td>
                        Name
                    </td>
                    <td>
                        Age
                    </td>
                    <td colspan="3">
                        Birth Day
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="person in persons">
                    <td ng-bind: "person.name">{{ person.name }}</td>
                    <td ng-bind: "person.age">{{ person.age }}</td>
                    <td ng-bind: "person.bday">{{ person.bday }}</td>
                    <td>
                        <input type="button" ng-click="edit(person,persons,indexOf(person))" value="edit" />
                    </td>
                    <td>
                        <input type="button" ng-click="del(indexOf(person))" value="delete" />
                    </td>
                </tr>
            </tbody>
        </table>
        <table class="table table-bordered table-striped">
            <tbody>
                <!-- This table is to enter data-->
                <tr>
                    <td>Enter Name: </td>
                    <td>
                        <input type="text" ng-model="name" />
                    </td>
                </tr>
                <tr>
                    <td>Enter Age: </td>
                    <td>
                        <input type="text" ng-model="age" />
                    </td>
                </tr>
                <tr>
                    <td>Enter Birth Day: </td>
                    <td>
                        <input type="text" ng-model="bday" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="button" ng-click="btnclk()" value="Save" />
                    </td>
                    <td>
                        <input type="button" ng-click="btnupd(name,age,bday)" value="Update" />
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <script>
    angular.module('sortApp', [])

        $scope.persons = [{
            name: 'Seif',
            age: '15',
            bday: 2
        }, {
            name: 'Zied',
            age: '14',
            bday: 4
        }, {
            name: 'Meriem',
            age: '17',
            bday: 7
        }, {
            name: 'Jaber',
            age: '2',
            bday: 6
        }];
        $scope.del = function(index) {
            $scope.persons.splice(index, 1);
        };
        $scope.btnclk = function() {
            if (!$scope.name) {
                alert("Enter Name");
            } else if (!$scope.age) {
                alert("Enter Age");
            } else if (!$scope.bday) {
                alert("Enter Birth Day");
            } else {
                $scope.persons.push({
                    'name': $scope.name,
                    'age': $scope.age,
                    'bday': $scope.bday
                });
                $scope.name = '';
                $scope.age = '';
                $scope.bday = '';
            }
        };
        var key;
        $scope.edit = function(person, index) {
            key = index;
            $scope.name = person.name;
            $scope.age = person.age;
            $scope.bday = person.bday;
        };
        $scope.btnupd = function(name, age, bday) {
            $scope.persons[key].name = name;
            $scope.persons[key].age = age;
            $scope.persons[key].bday = bday;
            $scope.name = '';
            $scope.age = '';
            $scope.bday = '';
        };
    });
    </script>
</body>
</html>

几点:

  1. 调用编辑函数时，你传递了3个参数。因此，您的key变量被设置为您正在传递的persons。
  2. 不需要将姓名、年龄、生日传递给btnupd()。您可以使用$scope变量。例如$scope.persons[key].name = $scope。名称;
  3. 不定义var key，我更喜欢定义$scope.key，并以这种方式使用
相关文章：