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

标签 javascript angularjs

这是我的问题之后的一个问题 here

我有一个 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);
        });
};

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

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

最佳答案

userData 在 Controller 中不可用,因为 Controller 范围和 ng-repeat 范围不同。 ngRepeat 从 Controller 范围创建子范围。

因此,您必须使用 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);
    });
};

关于javascript - 在 put 方法之前从作用域获取数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29434708/

相关文章:

javascript - 这种情况下如何用jQuery实现切换效果呢?

javascript - 如何在 ANTD 设计菜单中添加自定义图像/图标?

javascript - Opera 和 Chrome 浏览器中显示的 Div 之间的空间

javascript - JavaScript Canvas 中超出了最大调用堆栈大小

javascript - JavaScript 中 math.pow 的替代函数

javascript - 仅将 Angular 路由器应用于网站的一部分?

javascript - Wordpress,在按下按钮时滚动

angularjs - 为什么我会在指令定义中收到错误 TS2345?

angularjs - angular-route 如何防止第一次下载,但稍后允许

javascript - Angular : how tooltip-trigger works?