在put方法之前从作用域获取数据

Getting data from scope before put method

本文关键字:作用域 获取 数据 put 方法      更新时间:2023-09-26

下面是我的问题。

我有一个HTML页面

<body data-ng-controller="usersController">
<table class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th>#</th>
                    <th>ID</th>
                    <th>Username</th>
                    <th>Email</th>
                    <th>Registration Date</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="userData in users" >
                    <td><input type="checkbox"/></td>
                    <td>{{ userData._id }}</td>
                    <td>{{ userData.username }}</td>
                    <td>{{ userData.email }}</td>
                    <td>{{ userData.registrationDate }}</td>
                    <td>
                        <!-- Button trigger for Action modal -->
                        <button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#actionModal{{$index}}" data-ng-click="Clear()">
                        <span class="glyphicon glyphicon-cog"></span>
                        </button>
                        <!-- Action Modal -->
                        <div class="modal fade" id="actionModal{{$index}}" tabindex="-1" data-role="dialog">
                          <div class="modal-dialog">
                            <div class="modal-content">
                                <form role="form">
                                    <div class="form-group">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title">Users details for <strong>{{ userData.username }}</strong></h4>
                                        </div>
                                        <div class="modal-body">
                                            <fieldset>
                                                <legend>User Details</legend>
                                                    <dl class="dl-horizontal">
                                                        <dt>User ID</dt>
                                                        <dd>{{ userData._id }}</dd>
                                                        <dt>User Login</dt>
                                                        <dd><input type="text" class="form-control input-xs" data-ng-model="userData.username"></dd>
                                                        <dt>User Email</dt>
                                                        <dd><input type="text" class="form-control input-xs" data-ng-model="userData.email"></dd>
                                                        <dt>Password</dt>
                                                        <dd><input type="password" class="form-control input-xs" data-ng-model="userData.password"></dd>
                                                        <dt>User Registration</dt>
                                                        <dd>{{ userData.registrationDate }}</dd>
                                                        <dt>Notes</dt>
                                                        <dd><textarea class="form-control input-xs text-left" placeholder="Type some notes…" data-ng-model="userData.userNotes"></textarea></dd>
                                                    </dl>
                                            </fieldset>
                                            <fieldset>
                                                <legend>Site Setting</legend>
                                                    <dl class="dl-horizontal">
                                                        <dt>Affiliate ID</dt>
                                                        <dd><input type="text" class="form-control input-xs"></dd>
                                                    </dl>
                                            </fieldset>
                                        </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                        <button type="button" class="btn btn-primary" data-ng-click="updateUser(userData._id)">Save changes</button>
                                    </div>
                                  </div>
                                </form>
                            </div>
                          </div>
                        </div>
                                                </td>
                </tr>
            </tbody>
        </table>

在以下代码中,$scope.userData为空。

$scope.updateUser = function(id) {
    var userData = $scope.userData;
    $http.put('/api/users/' + id, userData)
        .success(function(userData) {
            console.log(userData);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

Action列中的每个Action按钮都在打开用户详细信息(通过在模式中传递{{index}}),在输入表单中显示数据。我想从该模式更新用户详细信息,但无法从表单中获取数据:$scope.userData为空

任何帮助都将不胜感激,因为我是新手:)

userData在控制器中将不可用,因为控制器作用域和ng重复作用域不同。ng重复从控制器作用域创建子作用域。

因此,您必须使用id或任何唯一密钥或索引从$scope.users中查找userData。

$scope.updateUser = function(id) {
var userData = $scope.users[id];
$http.put('/api/users/' + id, userData)
    .success(function(userData) {
        console.log(userData);
    })
    .error(function(data) {
        console.log('Error: ' + data);
    });
};

这是解决方案。

$scope.users[id]返回未定义$scope.users返回一个类似的对象数组

对象1{_id:"551d468b53ac2cef3b0000001",用户名:"will",密码:"***",电子邮件:"will@gmail.com"…},对象2{_id:…

然后我只创建一个读取对象内容的函数,通过id 获得好的对象

$scope.updateUser = function(id) {
    var userArray = $scope.users;
    function search(id, array) {
        for (var i=0; i<array.length; i++) {
            if (array[i].id === id) {
                return array[i] 
            };
        };
    };
    var userNewData = search(id, userArray);
    $http.put('/api/users/' + id, userNewData)
        .success(function(userData) {
            console.log(userData._id);
            console.log(userNewData);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};