ng-repeat内の入力ngモデル

Question

他のユーザーが入力フィールドを使用してコメントできるようにする作業のリストを繰り返しています。 ng-repeatでリストを繰り返し、ng-modelとscopeでコメント入力の値をサーバに送信しようとしています。私はコンソールログでテストしていますが、未定義と表示されます。助けてください！

HTML：

<div class="taskContainer"> 
    <div ng-repeat='task in taskList' class="task"> 
    <div class="postedBy"> 
     <h6>{{task.user.userName}}</h6> 
    </div> 
    <h4>{{task.taskText}}</h4> 
    <div class="comments"> 
     <input ng-model="newComment" type="text" placeholder="comments"> 
     <button ng-click='comment(task.taskId)' type="button" name="button">Add</button> 
     <h6>{{task.commentText}}</h6> 
    </div> 
    </div> 
</div> 

JSコントローラ：

$scope.comment = function(id,text){ 
     console.log(`send comment text ${$scope.newComment}`); 
     console.log(`task Id: ${id}`); 
    }; 

これは、私はあなたが取得しているNGリピート

Answer 1

で表示itmes以上のことをしようとしたのは初めてですundefined をngRepeatが作成するためです。

ngModelは、常にDot Ruleまたはcontroller-as-syntaxを使用して割り当てます。

あなたのコントローラでそれを入れて：

$scope.model = {}; 

次に、このようngModelを使用します。

<input ng-model="model.newComment[$index]" type="text" placeholder="comments"> 

その後、あなたはこのような何か持つことができます。

<div class="taskContainer"> 
    <div ng-repeat="task in taskList track by $index" class="task"> 
    <div class="postedBy"> 
     <h6>{{task.user.userName}}</h6> 
    </div> 
    <h4>{{task.taskText}}</h4> 
    <div class="comments"> 
     <input ng-model="model.newComment[$index]" type="text" placeholder="comments"> 
     <button ng-click='comment($index)' type="button" name="button">Add</button> 
     <h6>{{task.commentText}}</h6> 
    </div> 
    </div> 
</div> 

$scope.comment = function(index) { 
    console.log(`send comment text ${$scope.model.newComment[index]}`); 
    console.log(`task Id: ${taskList[index].id}`); 
}; 

注：をあなたの関数は2つのパラメータを期待しています。

$scope.comment = function(id) { 

Answer 2

HTML、

<input ng-model="newComment" type="text" placeholder="comments"> 
<button ng-click='comment(task.taskId, newComment)' type="button" name="button">Add</button> 

のJavaScript、

$scope.comment = function(id, text) { 
    console.log(`task Id: ${id}`); 
    console.log(`send comment text ${text}`); 
}; 

Answer 3

developer033 @から助けてくれてありがとうを：に変更しULD。ここ は私の問題を解決するものである：

HTML：

<div class="taskContainer"> 
    <div ng-repeat="task in taskList track by $index" class="task"> 
    <div class="postedBy"> 
     <h6>{{task.user.userName}}</h6> 
    </div> 
    <h4>{{task.taskText}}</h4> 
    <div class="comments"> 
     <input ng-model="model.newComment[$index]" type="text" placeholder="comments"> 
     <button ng-click='comment(task.taskId,$index)' type="button" name="button">Add</button> 
     <h6>{{task.commentText}}</h6> 
    </div> 
    </div> 
</div> 

とJS：

$scope.model = {}; 
    $scope.comment = function(id, index) { 
     console.log(`send comment text ${$scope.model.newComment[index]}`); 
     console.log(`task Id: ${id}`); 
    };