Software Costa Rica Software Costa Rica - 3 months ago 29
AngularJS Question

ng-model not capturing values in ng-repeat

I'm working on a project which involves

firebase
and
Angular
. What I'm trying to achieve is to capture a value from a
textarea
element nested in
ng-repeat
which is showing up the user posts from the firebase databases. I need to add a comment inside a user post, however when I try to capture the comment data from the textarea element using the
ng-model
directive inside the
ng-repeat
the value has not been captured correctly and I got the following error message:


TypeError: Cannot read property 'newComment' of undefined at
m.$scope.addCommentPost


This is the firebase database:

enter image description here

HTML:

<div class="row hide-on-med-and-down" id="ng-repeat" ng- repeat="PostList in PostList | orderBy: 'created_at':true">
<div class="col s12">
<div style="margin-top: 15px">
<div class="card horizontal z-depth-1" style="width: 900px; margin: 0 auto">
<div style="max-height: 400px " class="card-image">
<img style="max-height: 400px " src="{{PostList.downloadURL}}">

</div>
<div class="card-stacked">
<div class="card-content">
<span class="card-title">Card Title</span>
<p>{{PostList.post}}</p>
</div>
<div class="card-action">
<a ng-click="editPost(PostList.$id);" class="btn-floating waves-effect waves-light blue-grey lighten-4"><i class="material-icons">mode_edit</i></a>
<a style="margin-left: 5px" class="btn-floating waves-effect waves-light blue-grey lighten-4 "><i class="material-icons">thumb_up</i></a>
<a style="margin-left: 5px" ng-click="ConfirmDelete(PostList.$id);" class="btn-floating waves-effect waves-light blue-grey lighten-4"> <i class="material-icons">delete</i></a>
<a style="margin-left: 5px;" ng-click="collapsibleElement = !collapsibleElement" name="showComments" class="btn-floating btn-flat"><i style="color: #b0bec5" class="material-icons">question_answer</i></a>
</div>
</div>
</div>
</div>
<!-- DIV CONTAINER FOR CARD -->

<script>
$('.collapsible').collapsible({
accordion: false // collpsible + ng-repeat only works inside ng-repeat (the same for any js or jquery)
});
</script>

<div style="margin-top: 10px">
<ul ng-click="CallComments(PostList.$id);" ng-show="collapsibleElement" class="collapsible z-depth-1" data-collapsible="accordion" style="width: 900px; margin: 0 auto">
<li>
<div class="collapsible-header">
<i class="material-icons">create</i>Add something...
</div>
<div class="collapsible-body">
<form name="regform">
<div class="row">
<div class="form-group col s12" ng-class="{ 'has-error' : regForm.email.$invalid }">
<textarea ng-model="data.newComment" class="form-control" autofocus placeholder="What do you think?...." id="comments" type=text class="materialize-textarea"></textarea>
<p style="color: #13e1ff" class="help-block" ng-show="regForm.email.$invalid">Type Something</p>
</div>
</div>
<div class="row">
<div class="right">
<button ng-click="addCommentPost();" ng-disabled="!data.newComment" class="btn waves-effect waves-light light-blue lighten-2" type="submit" name="action">
Submit
<i class="material-icons right">send</i>
</button>
</div>
</div>
</form>
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">textsms</i>Comments</div>
<div class="collapsible-body">
<p ng-repeat="innerPostList in PostList.PostedComments">{{innerPostList.comments}}</p>
</div>
</li>
</ul>
</div>
<!-- DIV CONTAINER FOR COLLAPSE -->
</div>
</div>


JS:

var firebaseRef = firebase.database().ref('PostUsers/');
$scope.PostList = $firebaseArray(firebaseRef);

$scope.CallComments = function(id) {
console.log('The post id is: ' + id);
//RETREIVE DATA BASE POST FROM FIREBASE AS A POST
var firebaseRef = firebase.database().ref('PostUsers/' + id);
$scope.PostListUpdate = $firebaseObject(firebaseRef);
}

//PASSING THE ID DATA FROM THE POST TO THE MODAL
$scope.addCommentPost = function() {
if (!$scope.regForm.$invalid) {
var comment = $scope.data.newComment;
console.log(comment);
firebase.database().ref('PostUsers/' + $scope.PostListUpdate.$id + '/PostedComments').push({
comments: comment
}).then(function(ref) {
var $toastContent = $('<p><span id="iconToast" class="fa fa-user"> </span>Comment added!</p>');
Materialize.toast($toastContent, 2000, 'message');
}, function(error) {
var $toastContent = $('<p><span id="iconToast" class="fa fa-user"></span>Upss! <br> error happened try again!</p>');
Materialize.toast($toastContent, 2000, 'message');
console.log("Error:", error);
});
}
}

Answer

The reason you are getting that error is because you haven't initialized a value for data. In your controller code, outside of the addCommentPost function you should initialize it as an empty object, since there might be multiple properties of data So near the top of your controller definition, but still inside so that you have access to the $scope variable, add the following $scope.data = {};