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
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.
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.
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
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>
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