ng-repeatの内部でng-modelを使用してAngularJS形式でデータを送信

私はthis questionと同じ問題がありますが、そこにある解決策は私のためには機能しません。ng-repeatの内部でng-modelを使用してAngularJS形式でデータを送信

私はAngularJSを勉強しており、ng-modelの内部にng-repeatを使用してフォームデータを送信することに苦労しています。私は、グループのメンバーと、彼らは最後に出席した日付のリストを持っている：

[{"name": "Bob", "attended": "01/01/16"}, 
{"name":"Steve", "attended": "02/01/16"}]

私はng-repeatを使用して、すべてのメンバーをリストアップしていて、中にフォームから「出席」フィールドを更新できるようにしたいと思います各行。しかし、私は適切にバインドするために「出席」することはできません。コードは次のとおりです。

<div ng-repeat="member in members"> 
    {{member.name}} 
    <input type="text" ng-model="attended"></input> 
    <a href="#" ng-click="setAttended(attended)">Save</a> 
</div> 

$scope.setAttended = function(attended){ 
     alert('Date: ' + attended); 
};

アラートには「Date：undefined」と表示されます。

<div ng-repeat="member in members"> 
    {{member.name}} 
    <input type="text" ng-model="member.attended"></input> 
    <a href="#" ng-click="setAttended(member)">Save</a> 
</div> 

$scope.setAttended = function(member){ 
     alert('Date: ' + member.attended); 
};

私はng-repeatは、各オブジェクトの新しいスコープを作成することを取得し、それらのスコープは、親スコープからsetAttended継承：私はまた、プリミティブの代わりにオブジェクトを使用してみました。親スコープが子スコープで何が起こっているのかわからないので、パラメータはそれを知らせなければなりません。

なぜ私のパラメータに入力値が含まれていませんか？

setAttendedを実行する前に入力がモデルに正しくバインドされていませんか？

出典

2016-08-03 capnmojo

から正しいscopeオブジェクトを参照します私。下のスニペットを参照してください。あまりにも1作品

<!DOCTYPE html> 
 
<html lang="en" ng-app="myApp"> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 

 

 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.9/angular-route.min.js"></script> 
 

 

 

 
    <style> 
 
    </style> 
 

 
</head> 
 

 

 
<body ng-controller="myController"> 
 

 

 
    <div ng-repeat="member in members"> 
 
    {{member.name}} 
 
    <input type="text" ng-model="member.attended"/> 
 
    <a href="#" ng-click="setAttended(member)">Save</a> 
 
    </div> 
 

 

 
    <script> 
 
    var app = angular.module("myApp", []); 
 
    app.controller("myController", function($scope) { 
 
     $scope.members = [{ 
 
     "name": "Bob", 
 
     "attended": "01/01/16" 
 
     }, { 
 
     "name": "Steve", 
 
     "attended": "02/01/16" 
 
     }]; 
 

 
     $scope.setAttended = function(member) { 
 
     alert('Date: ' + member.attended); 
 
     } 
 

 
    }); 
 
    </script> 
 

 

 
</body> 
 

 
</html>

出典

2016-08-03 17:03:32 kukkuz

@capnmojo：plsは働いていると認めます。あなたのためですか？ – kukkuz

あなたはそうです、うまくいきます。問題は、私がフィールドで使用しているJQueryの日付ピッカーだったことが分かります。 datepickerから日付を選択すると、モデルは更新されません。日付を選択して手動でフィールドに何かを入力すると、モデルが更新されます。 – capnmojo

コードとフィードバック私の下に試してみてください：

<div ng-repeat="member in members"> 
    {{member.name}} 
    <input type="text" ng-model="members[$index].attended"></input> 
    <a href="#" ng-click="setAttended(members[$index].attended)">Save</a> 
</div> 

$scope.setAttended = function(attended){ 
     alert('Date: ' + attended); 
};

出典

2016-08-03 17:01:53 Mohsen

、。 – capnmojo

使用this、それは実際にそれがために働いているng-repeat機能

var app = angular.module('plunker', []); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.members = [{"name": "Bob", "attended": "01/01/16"}, 
 
{"name":"Steve", "attended": "02/01/16"}]; 
 
    $scope.setAttended = function(member){ 
 
      alert('Date: ' + this.attended); 
 
    }; 
 
});

<script data-semver="1.4.9" src="https://code.angularjs.org/1.4.9/angular.js" data-require="[email protected]"></script> 
 
    
 
<body ng-app="plunker" ng-controller="MainCtrl"> 
 
<div ng-repeat="member in members"> 
 
     {{member.name}} 
 
     <input type="text" ng-model="attended"> 
 
     <a href="#" ng-click="setAttended(member)">Save</a> 
 
    </div> 
 
    </body>

出典

2016-08-03 17:03:03

それは私がスコープをより良く理解するのに役立ちます、ありがとう！ – capnmojo

ng-repeatの内部でng-modelを使用してAngularJS形式でデータを送信

答えて

関連する問題