Question

我是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>

Answer 1

少数事情：

在调用编辑功能时，你传递3个参数。因此，您的key变量将设置为您传递的persons。
没有必要将name，age，bday传递给btnupd（）。您可以使用$ scope变量。例如$ scope.persons [key] .name = $ scope。 name;
我宁愿定义var key并以此方式使用

$scope.key

更新AngularJs中示例crud示例中的表

1 个答案: