web-dev-qa-db-ja.com

ng-repeatで機能しない双方向バインディング

単純なng-repeatリストがあり、次のように、現在のリストアイテムの値をコントローラーの別のプロパティに割り当てています。

  <li ng-repeat="num in list">
    <input type="text" ng-init="value = num" ng-model="value" />
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button>
  </li>

しかし、[保存]ボタンをクリックすると、$ scope.valueに設定されたデフォルト値が表示されます。特定の入力テキストの値が表示されることを期待しています。

コントローラは次のとおりです。

 angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = false;
      $scope.list = [0, 1, 2, 3, 4];

      $scope.save = function() {
         alert($scope.value);
      }
    });

関数の保存呼び出し時に、コントローラーの入力項目の更新された値にアクセスするにはどうすればよいですか。

これが同じプランカーです： plnkr

Update：値をパラメーターとして渡さずにコントローラーにフェッチすることを期待しています。

javascriptangularjsng-repeatangular-ngmodel2-way-object-databinding
7
jsbisht

うわー、ほとんどの人がこれを見逃しているなんて信じられません。 Angular 1.2を使用している場合は、ngRepeatディレクティブでtrack byキーワードを必ず確認する必要があります。

<li ng-repeat="num in list track by $index">
    <input type="text" ng-model="list[$index]" />
    <button type="button" class="btn btn-primary" ng-click="save()">Save</button>
</li>

結論バインド時にプリミティブ型から離れている同期の問題が発生するため。

Fellasは、単にポイントを投稿するのではなく、ソリューションの調査にもっと時間と労力を費やしてください。

お役に立てれば！

10
AvetisG

ngRepeatはスコープを作成するため、オブジェクトは参照で渡され、数値は値で渡されます。コードに問題があります。値を正常に更新すると、ng-repeatのすべての数値が更新されます。あなたはこれを行うことができます：

html

    {{value.val}} <!-- for check the value -->
<li ng-repeat="num in list">
    <input type="text" ng-model="num" />
    <button type="button" class="btn btn-primary" ng-click="value.val=num">Save</button>
  </li>

javascript

angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = {val:false};
      $scope.list = [0,1,2,3,4];
});

http://jsfiddle.net/oq6zdeLd/

英語でごめんなさい...

3
Elad

これがあなたがそれをする方法です

<li ng-repeat="num in list">
    <input type="text" ng-init="value = num" ng-model="value" />
    <button type="button" class="btn btn-primary" ng-click="save(value)">Save</button>
  </li>


angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = false;
      $scope.list = [0, 1, 2, 3, 4];

      $scope.save = function(argument) {
         $scope.value = argument;
         alert($scope.value);
      }
    });
0
Harpreet Singh

式を乱用しないでください"2ウェイバインディング";）

コントローラにはスコープが1つあり、そのスコープには$scope.valueが1つだけあります。複数の値を同時に持つことを強制することはできません。

ng-repeatは、liごとに新しいスコープを作成します。また、$parent.valueを使おうとしても、コントローラーの$scope.valueにはng-initで最後に割り当てられた値しかありません。

この場合、値を引数として渡すのが最善の策です。これが問題をもう少し説明するのに役立つことを願っています。私が間違っている場合は私を訂正してください。

0
Brian