在放入方法之前从范围获取数据

时间:2015-04-03 15:04:37

标签: 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为空

任何帮助都会受到赞赏,因为我是新手:)

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:0)

这是解决方案。

$ scope.users [id]返回undefined。 $ scope.users返回一个像

这样的对象数组

Object1 {_ id:&#34; 551d468b53ac2cef3b000001&#34;,用户名:&#34;将&#34;,密码:&#34; ****&#34;,电子邮件:&#34;将@ gmail.com&#34; ...}, Object2 {_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);
        });
};