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... は select 関数の外では未定義です..

何か助けはありますか？

4

2 に答える 2

0

あなたの問題は、ループ内に関数があるため、関数が実行されるiまでに常に等しいこと です。$scope.info.length + 1

jshintを使用すると、そのようなエラーが警告されるため、実行時にそれらを発見することはありません。

于 2014-07-01T22:21:39.450 に答える
0

唯一の問題は、 ($digest サイクルもトリガーする)$scope.$apply()へのコールバック内で使用していることです。ngClick

削除する$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>をボタンとして動作させ、リンクとしてスタイルを設定したい場合は、 を使用する必要がありますhref=""。

追加ボーナス 2:

を渡してから、一致する を見つけるために in のすべての s をidloppする必要はありません。 対応するものを直接渡すことができます：iinfodoc
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 に答える