dynamic ngmodel value in ngrepeat and acessing it - angularjs

I have comment feature for every article which is getting populated with ngrepeat.
New comment added should be updated to comments.
<div ng-repeat="Article in Articles">
<div class="Description">
{{Article.Description}}
</div>
<div class="commentbox">
<textarea placeholder="Share your View" ng-model="Article{{Article.Articleid}}" ></textarea>
<div class="post">
<a href="javascript: void(0)" ng-Click="AddComment({{Article.Articleid}});" > Article </a>
</div>
</div>
</div>
and the Js function to add the comment is
$scope.AddComment = function(ArticleID){
$scope.Comments.push({
ArticleID: ArticleID,
**ReviewText: $scope.Comment130, //how to acess the model of received ArticleID**
DateAdded:new Date()
});
my question is how to set the dynamic value to ng-model and access it in the jsfunction.
Thanks

i think your binding is somehow messed up. Something like this should do it. Watch the console for the received objects and you can start doing stuff with them.
http://plnkr.co/edit/ugtbO2
html
<div ng-repeat="a in articles" ng-model="article">
<div class="description">{{a.description}} (id: {{a.id}})</div>
<div class="commentbox">
<textarea placeholder="Share your View" ng-model="a.review"></textarea>
<div class="post">
<button ng-click="addComment(a)" > Submit </button>
</div>
</div>
</div>
js
$scope.articles = [
{id: '1',description: 'sdfsdf', review:''},
{id: '2',description: 'asa334', review:''},
{id: '3',description: 'dfsdfw3r', review: ''},
{id: '4',description: 'sdfsdf', review: ''}
];
$scope.addComment = function (article) {
$scope.comments.push({
ArticleID: article.id,
ReviewText: article.review,
DateAdded : new Date()
});
console.log($scope.comments);
};

Related

how to Create dynamic input form which is able to store the array in mongodb?

This is my mongoose schema
var VoSchema =new Schema({
name:{type: String,
required: true},
price:{type: String},
feeds : [Schema.Types.Mixed]
}, {strict: false});
Dynamic input field
<div ng-repeat="item in inputs">
<div>
<input ng-model="item.description">
</div>
<div>
<input ng-model="item.qty">
</div>
<div>
<input ng-model="item.cost"/>
</div>
<div >
{{item.cost * item.qty}}
</div>
</div>
<a class="btn btn-primary" href ng-click="addfield()" >[+]</a>
</div>
controller for angularjs
$scope.submitx = function(inv){
$scope.inv.feeds = $scope.inputs.item
console.log(inv);
PostBlog.createInvoice(inv).then(function(data){
console.log(data);
});
$scope.inv= {};
}
$scope.inputs = [];
$scope.addfield=function(){
$scope.inputs.push({ qty:0, cost:0, description:"" })
}
I want to push the data in array to mongodb, how can i achieve this?
please explain if possible in detail? how to use dynamic form in mean stack.

resetting scope data in ng-repeat error

I'm having trouble resetting a scope model. I am sure I am making an obvious mistake that isn't so obvious to me.
<div class="" ng-repeat="comment in comments">
<div class="feed-entry">
<div class="user-image-round" ng-style="{'background-image':'url({{ comment.comment_user_image }})'}"></div>
<div class="right-text-section">
<div class="commentor-name">{{comment.comment_user}}</div>
<p class="comment-text">{{ comment.comment_text }}</p>
<div class="divider"></div>
<div class="" ng-repeat="entry in comment.comment_response_entries">
<div class="comment-entry">
<div class="commenter-image-round" ng-style="{'background-image':'url({{ entry.user_image }})'}">
</div>
<div class="right-text-section">
<div class="commentor-name">{{entry.user_name}}</div>
<p class="comment-text">{{ entry.response_entry }}</p>
</div>
</div>
</div>
</div>
<div class="comment-post">
<form ng-submit="addComment($index, sub_comment)">
<textarea class="text-area" placeholder="Write a comment" ng-model="sub_comment" required></textarea>
<button class="post-button">Post</button>
</form>
</div>
</div>
</div>
angular.module('App')
.controller('CampaignCtrl', function ($scope){
$scope.addComment = function(index, subcomment){
$scope.comments[index].comment_response_entries.push({
user_name : 'Daniel Tawfik',
user_image : '/images/crowdcitizen/daniel-tawfik.jpg',
response_date : 'October 1xt, 2015',
response_entry : subcomment,
response_entry_likes : 0,
response_entry_liked : false,
});
$scope.sub_comment = '';
}
}
I have an ng-repeat on comments. On each comment entry the user should be able to post a response to the comment. ng-sumbmit calls addComment which takes the comment index pushes a comment_reponse_entry object the array. This works fine.
The problem I am having is that when I reset scope model with $scope.sub_comment = '' the textarea value doesn't update. It seems like the scope has changed, but I can't seem to access it again.

Push To Angular JS Array

I'm running into a strange issue when executing the .push() method on an angular js collection. In the console I can see the object is added, but I cannot actually see it added to the list.
$scope.discountCodes.push({
discountCodeId: 0,
name: $scope.discountModel.name,
code: $scope.discountModel.code,
codeValue: $scope.discountModel.codeValue,
valueType: $scope.discountModel.valueType,
startDate: $scope.discountModel.startDate,
endDate: $scope.discountModel.endDate,
isActive: "True"
});
I have a simple repeater combined with a template
<div ng-repeat="discount in discountCodes" ng-include="getTemplate(discount)">
</div>
<script type="text/ng-template" id="display">
<div class="row">
<div class="col-md-3">
<span>Name:<br />{{discount.Name}}</span>
</div>
<div class="col-md-2">
<span>Code:<br />{{discount.Code}}</span>
</div>
<div class="col-md-2">
<span>Value:<br />{{discount.CodeValue}}</span>
</div>
<div class="col-md-2">
<span>Active:<br /></span>
<i class="icon-circle green-fill"
ng-show="discount.IsActive">
</i>
<i class="icon-circle red-fill"
ng-show="!discount.IsActive">
</i>
</div>
<div class="col-md-2"><br />
<i class="icon-edit icon-2x"></i>
</div>
</div>
</script>
This is the method:
$scope.discountModel.formSubmit = function (item, event) {
$scope.alertMessageContainerVisible = false;
if ($scope.frmDiscountForm.$valid) {
var dataObject = {
discountCodeId: 0,
name: $scope.discountModel.name,
code: $scope.discountModel.code,
codeValue: $scope.discountModel.codeValue,
valueType: $scope.discountModel.valueType,
startDate: $scope.discountModel.startDate,
endDate: $scope.discountModel.endDate,
isActive: "True"
};
action = "NEW";
$scope.discountCodes.push(dataObject)
});
}
}
Any ideas are helpful, I am new to Angular JS so be easy on me :)
I created a very simple version of this below:
http://plnkr.co/edit/qJDU7uiFleWIOjR5LYFh
It looks like you might be updating the collection outside of the Angular context. If so, you'll need to use $scope.$apply() for Angular to see your changes.
Turned out to be a stupid mistake! I had my controller defined in the body and in the div, so it was in two places. Now everything is working good!
Thanks all, it was good learning experience

how to show exact content of ng-repeat using ng-click in angularjs

I am trying to show exact content when I click on data from ng-repeat.
<div ng-repeat="trailSpot in trail.wayPoints">
<a ng-click="viewState.showSpotDetails = !viewState.showSpotDetails">
<p>Spot {{$index + 1}}. {{trailSpot.wpName}}</p>
</a>
<p >{{trailSpot.wpDescription}}</p>
</div>
When I click the first wpName, I want to show wpDescription only about the first wpName on another div. What should I put in that div.
<div class="panel-body" ng-show="viewState.showSpotDetails">
<div>
???
</div>
</div>
Anybody has any tips on what I am trying to do?Thank you!
Just pass the object to assign the property like this:
http://jsfiddle.net/wLs8axLj/
JS
var app = angular.module('itemsApp',[]);
app.controller('ItemsCtrl',function($scope) {
$scope.items = [
{name:'Test 1',details:'Test 1 Details'},
{name:'Test 2',details:'Test 2 Details'}
];
$scope.showDetails = function(i) {
$scope.item_details = i.details;
};
});
HTML
<div ng-app="itemsApp" ng-controller="ItemsCtrl">
<ul>
<li ng-repeat="i in items" ng-click="showDetails(i)">{{i.name}}</li>
</ul>
<hr>
{{item_details}}
</div>

How to get Angular to have a click event bring part of the dom with it to the function?

I am creating a small practice to-do list app with Angular. I have created a form for creating new tasks and they are updating fine. I have a button generate for every task that is titled "remove". I'd like to make the button remove specifically that task from the todo list. Here's the html code:
<div ng-controller="todoListController">
<ul>
<li ng-repeat="task in taskList">
<p>
{{task.name}}: {{task.description}}
<button ng-click="killtodo()"> Remove </button>
</p>
</li>
<hr>
<h3> Display: </h3>
<li>
<p>
{{task}}: {{taskDescription}}
<p>
</li>
</ul>
<hr>
<form ng-submit="addto()">
<input type="text" ng-model="task" placeholder="Enter a task name.">
<input type="text" ng-model="taskDescription" placeholder="Enter the description.">
<input class="btn-primary" type="submit" value="add">
</form>
</div>
Javascript code:
function todoListController($scope) {
$scope.taskList = [
{"name": "Task List",
"description": "Make a Task List."}
];
$scope.addto = function() {
$scope.taskList.push({name:$scope.task, description:$scope.taskDescription});
$scope.task = '';
$scope.taskDescription = '';
};
$scope.killtodo = function(name) {
};
}
Any suggestions would be great, thanks.
You have access to a variable called $index while using an ng-repeat so you can do something like this:
<li ng-repeat="task in taskList">
<p>
{{task.name}}: {{task.description}}
<button ng-click="killtodo($index)"> Remove </button>
</p>
</li>
And then in your controller:
function todoListController($scope) {
//other code
$scope.killtodo = function($index){
$scope.taskList.splice($index, 1);
}
}
There's more description available in the docs at the top (including other variables you can use): http://docs.angularjs.org/api/ng.directive:ngRepeat

Resources