web-dev-qa-db-ja.com

ネストされた$ scope配列が更新されても、Angular.jsビューは更新されません

コメントを追加するときに、angular.jsビュー自体を更新しようとしています。私のコードは次のとおりです。

<div class="comment clearfix" data-ng-repeat="comment in currentItem.comments" data-ng-class="{bubble: $first}" data-ng-instant>
    <div>
        <p>
            <span class="username">{{comment.user}}</span> {{comment.message}}
        </p>
        <p class="time">
            10 minutes ago
        </p>
    </div>
</div>
<div class="comment reply">
    <div class="row-fluid">
        <div class="span1">
            <img src="assets/img/samples/user2.jpg" alt="user2" />
        </div>
        <div class="span11">
            <textarea class="input-block-level addComment" type="text" placeholder="Reply…"></textarea>
        </div>
    </div>
</div>

スコープは入力時に更新されます。

$('.addComment').keypress(function(e) {
    if(e.which == 10 || e.which == 13) {
        $scope.currentItem.comments.Push({
            "user": "user3",
            "message": $(this).val()
        });
        console.debug("currentItem", $scope.currentItem);
    }
});

$ scope.currentItemをデバッグすると、コメントが追加されたことが示されますが、ビューには新しいコメントは表示されません。 $ scopeは最初のレベルでのみ監視されているため、ビューが更新されないのではないかと思います。そうですか？もしそうなら、どうすれば修正できますか？

解決策：Ajayが以下の回答で提案したように、配列Pushを次のように適用関数にラップしました。

var el=$(this);
$scope.$apply(function () {
     $scope.currentChallenge.comments.Push({
         "user": $scope.currentUser,
         "message": el.val()
     });
});
javascriptangularjsangularjs-scopeangularjs-ng-repeat
12
Dine

angularスコープの外側でプロパティを変更しているため、スコープ内でラップするようにコードを変更します。値を監視するには、 scope。$ apply（） を使用する必要があります。

18
Ajay Beniwal

フォームをng-repeatと同じdivコントローラー内に配置する必要がありました。私は2つの別々のdivコントローラーを持っていました。

0
NateGreat8
<div class="col-sm-12 col-lg-12">
            <div class="outer-container">
                <div class="inner-container">
                    <div class="table-header">
                        <form id="teamForm" name="teamForm">
                            <table class="table table-bordered">
                                <thead>

                                <!-- Grid header -->
                                <tbody data-ng-if="(allTeamMembers.length==0)">
                                    <tr>
                                        <td class="text-center height_33_p" colspan="15"> {{noResultFound}} </td>
                                    </tr>
                                </tbody>
                                <!-- Existing team member -->

                                <tbody data-ng-repeat="tm in teammemberDetailsArryobject|orderBy:orderByField:reverseSort" data-ng-form="innerForm_$index" data-ng-class="{'ng-submitted':innerForm_$index.$submitted}">
                                    <tr></tr>
                                    </tbody>

コードでは、1つのレコードを削除し、プログラムで新しい行を追加していますが、すべての行がng-repeat行に表示されます（削除済みを含む）

0
tom

$ scope.arryaObjectの代わりに、$ scope。$ parent.arrayObjetを使用して親変数を変更します。私の場合はうまくいきました。

0
Anand H G