CODEWITHSUNDEEP
angularjs
Riggan Hart
Riggan Hart

Reputation: 13

input ng-model within ng-repeat

I am repeating a list of tasks that I would like other users to be able to comment on using an input field. I repeat the list with ng-repeat and am trying to send the value of the comment input to the server with ng-model and scope. I am testing by console logging but it shows as undefined. Please help!

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 controller:

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

This is the first time I've tried to do more than display itmes with ng-repeat

Upvotes: 1

Views: 2798

Answers (3)

Riggan Hart
Riggan Hart

Reputation: 13

Thanks for the help from @developer033. Here is what solved my problem:

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>

and the JS:

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

Upvotes: 0

user1111
user1111

Reputation: 2020

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}`);
};

Upvotes: -1

developer033
developer033

Reputation: 24874

You're getting undefined because ngRepeat creates its own $scope.

Always assign ngModel using Dot Rule or controller-as-syntax.

Put it in your controller:

$scope.model = {};

Then use the ngModel as this:

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

Then you can have something like this:

<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}`);
};

Note: Your function is expecting 2 parameters, you should change it to:

$scope.comment = function(id) {

Upvotes: 2

Related Questions