0

我开发了与 PouchDB 数据库集成的 AngularJS 应用程序。当试图从数据库中获取信息时，$scope 变量只存在于方法内部。

db.allDocs({include_docs: true, descending: true}, function(err, doc) {
    $scope.$apply(function(){  
        $scope.info = doc.rows;
    });
});

$scope.select = function(id){

        for(var i = 0; i < $scope.info.length; i++){
            if(id == $scope.info[i].doc._id){
                $scope.$apply(function (){
                    $scope.sName = $scope.info[i].doc.name;
                    $scope.sSurname = $scope.info[i].doc.surname;
                    $scope.sPhone = $scope.info[i].doc.phone;
                    $scope.sAddress = $scope.info[i].doc.address;
                    console.log($scope.info[i].doc);
                });


            }
        }

    };

这里我调用 Select 函数来选择一个用户，然后我想在输入中显示该用户，以便我可以更新信息。

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
    <h3>All users</h3>
    <div class="list-group">
        <a href="#" ng-repeat="i in info" class="list-group-item" ng-click="select(i.doc._id)">{{i.doc.name + ' ' + i.doc.surname}}</a>
    </div>
</div>

这里我使用 $scope 变量

<div class="col-xs-6 col-sm-3 sidebar-offcanvas" style="margin-left: 20%;">
    <h3>Selected user</h3>
    <input type="text" ng-model="sName"  class="form-control" placeholder="Name" />
    <input type="text" ng-model="sSurname" class="form-control" placeholder="Surname" />
    <input type="text" ng-model="sPhone" class="form-control" placeholder="Phone" />
    <input type="text" ng-model="sAddress" class="form-control" placeholder="Address" />
    <br/>
    <table>
        <tr>
            <td><button ng-click="" class="btn btn-lg btn-primary">Update</button></td>
            <td><label style="visibility: hidden;">a;dl</label></td>
            <td><button ng-click="" class="btn btn-lg btn-danger">Remove</button></td>
        </tr>
    </table>
</div>

$scope.sName, $scope.sSurname... 在选择函数之外未定义..

有什么帮助吗？

4

2 回答 2

0

唯一的问题似乎是您$scope.$apply()在回调内部使用ngClick（这也会触发 $digest 循环）。

删除$scope.$apply()它应该可以正常工作：

$scope.select = function (id) {
    for (var i = 0; i < $scope.info.length; i++) {
        if (id === $scope.info[i].doc._id) {
            // $scope.$apply(function (){
                $scope.sName = $scope.info[i].doc.name;
                $scope.sSurname = $scope.info[i].doc.surname;
                $scope.sPhone = $scope.info[i].doc.phone;
                $scope.sAddress = $scope.info[i].doc.address;
                console.log($scope.info[i].doc);
            // });
        }
    }
};

另请参阅这个简短的演示。

额外奖励1：

当链接href为#时，大多数浏览器将滚动到页面顶部（除非您手动阻止它）。如果你希望你<a>的 's 表现得像按钮并且仍然被设计成链接，你应该使用href="".

额外奖励2：

您不必通过id然后 lopp 遍历所有isinfo来找到匹配的doc。
可以doc直接传对应的：

<a href="" ... ng-click="select(i.doc)" ng-repeat="i in info">...</a>

$scope.select = function (doc) {
    $scope.sName    = doc.name;
    $scope.sSurname = doc.surname;
    $scope.sPhone   = doc.phone;
    $scope.sAddress = doc.address;
};
于 2014-07-02T07:36:49.620 回答
0

你的问题是你在一个循环中有一个函数，所以i总是等于 $scope.info.length + 1函数执行的时间。

如果您使用jshint，它会警告您此类错误，因此您不会在运行时发现它们。

于 2014-07-01T22:21:39.450 回答