Develop Reference

How do I bind a card to a button in Angular when there are multiple cards fetching data from database

I am making a blogpost app using Angular and REST service. I need to have an edit and delete functionality in the application and this is what I have done for it
Component Code :
export class EditblogsComponent implements OnInit {
allBlogs: any;
constructor(private http: HttpClient) {}
ngOnInit(): void {
this.http.get('http://localhost:3000/blogPosts').subscribe(
(data) => {
this.allBlogs = data as string[];
},
(err: HttpErrorResponse) => {
console.log(err.message);
}
);
}
editBlog() {}
deleteBlog() {}
}
HTML code
<div class="container">
<div class="row">
<div class="col-md-10">
<div class="card border-primary" *ngFor="let blog of allBlogs">
<div class="card-body">
<div class="card-title">
<h1>
{{blog.blogTitle}}
</h1>
</div>
<div class="card-text text-left">
{{blog.blogContent}}
</div>
</div>
<footer class="blockquote-footer">
<blockquote class="blockquote mb-0 text-end">
Written by : {{blog.blogUser}}
</blockquote>
</footer>
<div class="row button-row">
<div class="col-sm-2">
<button class="btn btn-primary" (click)="editBlog()">Edit
blog</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary" (click)="deleteBlog()">Delete
blog</button>
</div>
</div>
</div>
<br>
</div>
<br>
</div>
<br>
</div>
JSON Server for the blog section:
"blogPosts": [
{
"blogUser": "usera",
"blogTitle": "Title for first blogppost",
"blogContent": "Content of first blogpost",
"id": 1
},
{
"blogUser": "usera",
"blogTitle": "Title for second blogppost",
"blogContent": "Content of second blogpost",
"id": 2
}
],
I want to know how I can bind the edit and delete buttons so that they work on the specific blog that renders in the cards.

Provide the blog or it's id as an argument to the functions.
html
<div class="row button-row">
<div class="col-sm-2">
<button class="btn btn-primary" (click)="editBlog(blog)">Edit
blog</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary" (click)="deleteBlog(blog.id)">Delete
blog</button>
</div>
</div>
component
editBlog(blog: Blog) {}
deleteBlog(blogId: number) {}

Send the specific 'blog' object as an argument to the edit and delete methods like so:
HTML:
<div class="row button-row">
<div class="col-sm-2">
<button class="btn btn-primary" (click)="editBlog(blog)">Edit
blog</button>
</div>
<div class="col-sm-2">
<button class="btn btn-primary" (click)="deleteBlog(blog)">Delete
blog</button>
</div>
</div>
TS:
editBlog(blog:any)
{
}
deleteBlog(blog:any)
{
}

how can I make an v-if depending on a boolean object property?

I have a array of objects(comments from posts kind like facebook comments or any other social network) and I iterate it with an v-for, then I have on each comment a dropdown button with "edit" and "delete" buttons, I would like that when I press the edit button the comment would change to an input so I can edit it, so I added a property click_to_edit initialize in false to each comment object, so when I click on edit it changes the condition that the v-for is related to. But it does not change it, I guess it is that as the property is inside an object it always return false and therefore the condition never changes, but I do not know how else do this. This is the html for the v-for:
<div
class="mb-2"
v-bind:class="'comment_'+post.id"
v-for="(comment, index) in comments"
:key="index"
v-if="comment.id_post === post.id"
>
<div class="row">
<div class="col-img-user-post text-center">
<img
class="rounded-circle img-icon-profile"
:src="routes.user_files+'/'+comment.code+'/'+comment.picture"
alt
/>
</div>
<div class="col">
<div class="row">
<div class="col">
<div class="card-comment">
<div class="row">
<div v-if="!comment.clicked_to_edit" class="col">
<p class="mt-2 mb-2">{{ comment.description }}</p>
<p class="mb-0 font-smaller grey-color">{{ comment.time_ago }}</p>
</div>
<div v-if="comment.clicked_to_edit" class="col">
<input v-model="comment.description" type="text" />
<p class="mb-0 font-smaller grey-color">{{ comment.time_ago }}</p>
</div>
<div class="col-1">
<div class="row dropdown">
<div class="col">
<a
class="font-smaller"
type="button"
:id="'dropdownMenuButtonComment_'+index"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fas fa-lg fa-angle-down grey-color"></i>
</a>
<div
class="dropdown-menu dropdown-menu-right"
:aria-labelledby="'dropdownMenuButtonComment_'+index"
>
<button
class="dropdown-item"
v-if="comment.id_user===profile_info.id_user"
#click="editComment(comment.id, index)"
>
<i class="far fa-edit"></i>
Edit
</button>
<button
class="dropdown-item"
data-toggle="modal"
data-target="#modalDeleteComment"
v-if="comment.id_user===profile_info.id_user"
#click="actionComment(comment.id, 2, index)"
>
<i class="far fa-trash-alt red-color"></i>
<span class="red-color">Delete</span>
</button>
<button
class="dropdown-item"
v-if="comment.id_user!==profile_info.id_user"
#click="actionComment(comment.id, 3)"
>
<i class="far fa-flag"></i>
Report
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
The object comment stated in the data:
comment: {
id: "",
id_post: "",
description: "",
clicked_to_edit: false,
id_user: this.profile_info.id_user,
code: this.profile_info.code,
name: this.profile_info.name,
surname_1: this.profile_info.surname_1,
surname_2: this.profile_info.surname_2,
nick: this.profile_info.nick,
picture: this.profile_info.picture,
role: this.profile_info.id_role,
time_ago: "0 minutes"
},
and the edit function:
editComment(id, index) {
this.comments[index].clicked_to_edit = true;
console.log(this.comments[index]);
},

I purposefully ignored your model, to show a general case. If you need help applying it to your case, let me know.
Vue.config.productionTip = false;
Vue.config.devtools = false;
new Vue({
el: '#app',
data: () => ({
comments: [
{ id: 'one', description: "test 1" },
{ id: 'two', description: "test 2" },
{ id: 'three', description: "test 3" }
].map(i => ({ ...i,
isEditing: false
}))
}),
methods: {
async toggleEditing(comment, index) {
const isOpening = !comment.isEditing;
this.comments
.filter(c => c.isEditing)
.forEach(c => c.isEditing = false);
if (isOpening) {
comment.isEditing = true;
await this.$nextTick();
this.$refs.comments[index].querySelector('input').focus()
}
},
blur: ev => ev.target.blur()
}
})
.comment {
min-height: 21px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="(comment, i) in comments" ref="comments" :key="comment.id">
<div v-if="!comment.isEditing"
v-text="comment.description"
class="comment"
#click="toggleEditing(comment, i)"></div>
<div v-else>
<input v-model="comment.description"
#blur="toggleEditing(comment)"
#keyup.enter="blur"
/>
</div>
</div>
</div>

Vue-Validator form validation not working on JS Fiddle

I want to ask a question concerning vue-validator but it is not working on JSFiddle. Can someone please help me check what the issue is so that I can go ahead and ask the main question
See JSFiddle
Html:
<div id="app">
<validator name="instanceForm">
<form v-on:submit.prevent="addInstance()">
<div class="form-group">
<input id="'instancetext" type="text" class="form-control" placeholder="Enter new Instance" v-validate:instancetext="{ required: { rule: true, message: 'What is the instance ?'}}" v-model="todo.name">
<div class="errors" v-if="showErrors">
<span v-if="$instanceForm.instancetext.required">{{$instanceForm.instancetext.required}}</span>
</div>
</div>
<div class="form-group">
<button class="btn btn-default"> <i class="fa fa-plus"> </i> Add
</button>
</div>
</form>
</validator>
<div class="">
<div v-for="todo in todoStore" class="list-group">
<div class="list-group-item">
<h4>
Main Card
</h4> {{todo.name}} {{todo.id}}
</div>
<div class="list-group-item nopadding">
<button class="btn btn-xs btn-danger margin-10" v-on:click="todoDelete(todo)">
<i class=" fa fa-trash"></i>
</button>
<form #submit="addNoteInstance">
<div class="form-group">
<input id="note-#{{note.id}}" type="text" class="form-control" name="note-#{{note.id}}" placeholder="Enter new Note Instance" v-model="name">
<button type="submit"><i class="fa fa-plus"> Add Note Instance</i></button>
</div>
</form>
</div>
<div v-for="note in todoNoteStore" class="list-group nopadding nomargin">
<div v-if="todo.id == note.id">
<div class="list-group-item">
<h4>
Note fore card {{todo.id}}
</h4> {{note.id}}{{note.name}}
</div>
<div class="list-group-item nopadding">
<button class="btn btn-xs btn-danger margin-10" v-on:click="removeNoteInstance(note)">
<i class=" fa fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
</div>
<pre>{{ $data | json }}</pre>
</div>
Js:
new Vue({
el: '#app',
data: function() {
return {
showErrors: false,
todo: {
id: 1,
name: '',
completed: false,
check: ''
},
todoNote: {
id: 1,
name: '',
completed: false,
check: ''
},
todoStore: [
],
todoNoteStore: [
]
}
},
methods: {
addInstance: function() {
if (this.$instanceForm.valid) {
this.todoStore.push(this.todo);
this.todo = {};
this.showErrors = false;
} else {
this.showErrors = true;
}
},
addNoteInstance: function(e) {
e.preventDefault();
this.todoNoteStore.push({
"id": 1,
"name": this.name,
"completed": false,
"check": ''
});
this.name = '';
},
removeNoteInstance: function(note) {
this.todoNoteStore.remove(note);
}
}
});
css:
.nopadding {
padding-top: 0px;
!important;
padding-bottom: 0px;
!important;
}
.nomargin {
margin: 0px;
}

There are two problems here.
The CDN you are using for Vue-Validator (v2.1.7) seems to be broken. The links for 2.1.6 and 3.0.0-alpha1 seem to be fine. (this is specifically referring to links on cdnjs)
Vue-Validator 2.x only works with Vue 1.x. Your CDN for Vue is pointing to Vue 2.0.3.
So, either use Vue 1.x and a a working version of Vue-Validator 2.x, or use Vue 2.x and Vue-Validator 3.x (which is currently in alpha).

Wrong value with angular ng-repeat?

Am cycling through an array inside of an array of objects as:
<div ng-repeat="benefit in oe.oeBenefits">
<div class="oeInfo" style="clear: both;">
<div class="col-md-2 oeCol">
<img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
</div>
<div class="col-md-5 oeCol">
<h1>{{ benefit.benefitName }}</h1>
<p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
<p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
<p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
<p>link</p>
</div>
<div class="col-md-3 oeCol">
<p class="oeFeatures" style="font-weight: 800;">Available Features</p>
<ul>
<li ng-repeat="Features.value in oe.oeBenefits.Features">{{ Features.value }}</li>
</ul>
</div>
<p></p>
<div class="col-md-12">
<hr class="naviaHR100">
</div>
</div>
</div>
My JSON code returns the following, but getting that value just isn't happening despite changes. Here is the JSON returned:
"oeBenefits": [
{
"planId": "l0t3AlfKV%2fETUaQd0zZJGA%3d%3d",
"benefitTypeId": 1,
"benefitName": "Health Care FSA",
"isHsaAvailable": false,
"benefitMin": 0,
"benefitMax": 3510,
"numberOfContributions": 12,
"carryoverAmount": null,
"isDebitCard": true,
"is100percent": true,
"isGracePeriod": true,
"allowDirectDeposit": true,
"claimsRunout": 90,
"employerSeed": "Your employer will contribute additional funds to your benefit",
"learnMoreUrl": "http://www.naviabenefits.com/participants/benefits/health-care-fsa/",
"Features": [
{
"key": "0",
"value": "Navia Benefits Card"
},
{
"key": "2",
"value": "FlexConnect"
},
{
"key": "4",
"value": "Online claim submission"
},
{
"key": "5",
"value": "Online card swipe substantiation"
}
]
},
All the other repeated data from the object(s0 return just fine, just this features part where I want just the value, not the key.

this should resolve your problem for you
<div ng-repeat="benefit in oe.oeBenefits">
<div class="oeInfo" style="clear: both;">
<div class="col-md-2 oeCol">
<img style="height: 160px; padding-top: 20px;" src="ppt/assets/beneTiles/HealthCare.svg">
</div>
<div class="col-md-5 oeCol">
<h1>{{ benefit.benefitName }}</h1>
<p>Maximum Election Amount: {{ benefit.benefitMax }}</p>
<p>Contributions to be made: {{ benefit.numberOfContributions }}</p>
<p ng-show="benefit.employerSeed != null">{{ benefit.employerSeed }}</p>
<p>link</p>
</div>
<div class="col-md-3 oeCol">
<p class="oeFeatures" style="font-weight: 800;">Available Features</p>
<ul>
<li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>
</ul>
</div>
<p></p>
<div class="col-md-12">
<hr class="naviaHR100">
</div>
</div>
The problem is with your inner loop you are not using the correct array object

You should do <li ng-repeat="Features in oe.oeBenefits.Features">{{ Features.value }}</li> instead of <li ng-repeat="Features.value

you have a nested ng-repeat, so in your case your ng-repeat should look this
<li ng-repeat="feature in benefit.Features">{{ feature.value }}</li>

Pushing array data from a button to a table in Angular

I have a list of buttons and each button has some data. The data represent payment costs of standard copays for a doctor's office copay $10, copay $20 etc. I am attempting to use this application like a cash register so that when the user clicks the copay button (from the left) or a button from the outstanding balance with the dollar amount, it will add it to a list of totals on the right within my table. The user may keep clicking copays and outstanding balances to add rows (that will be added together) in the table on the right. I have been able to add blank table rows to my totals table, but am unsure how to get the values from the button to the table. Thanks in advance.
angular
.module('myApp')
.controller('BillingCtrl', function($scope){
$scope.payments= [
{id:'1', paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:10.00},
{id:'2',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:20.00},
{id:'3',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:35.00},
{id:'4',paytype:'Copay', billing:'Epic', busunit:'Ohio Physicians', amount:75.00}
];
$scope.outstanding=[
{busunit:'Ohio Physicians', date:'Fri, 18 Dec 2009 20:28:37 GMT', amount:100.00},
{busunit:'Ohio Physicians', date:'Wed, 06 Apr 2012 20:28:37 GMT', amount:100.00},
];
$scope.totals=[''];
$scope.addPayments= function (i) {
if($scope.totals.indexOf(i)<=1){
$scope.totals.push(i);
}
};
});
<div ng-controller="BillingCtrl">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-md-5">
<h4>Today's Payment</h4>
<form role="form" ng-submit="addPayment()">
<div class="list-group">
<button type="submit" value="Submit"class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading" ng-model="paytype">Copay</p>
</div>
<div class="col-sm-4">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="InputAmount" placeholder="Amount" ng-model="amount">
</div>
</div>
</form>
</div>
</div>
</button>
<button type="button" class="list-group-item" ng-repeat="payment in payments" ng-click="addPayments(selectedItem)" ng-model="selectedItem">
<div class="row vertical-align">
<div class="col-sm-4">
<p class="list-group-item-heading">{{payment.paytype}}</p>
</div>
<div class="col-sm-8">
<p class="pull-right">${{payment.amount}}</p>
</div>
</div>
</button>
<button type="button" class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">Other</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</div>
</div>
</button>
</div>
</form>
<br>
<h4>Outstanding Balances</h4>
<div class="list-group">
<button type="button" class="list-group-item" ng-repeat="balance in outstanding">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">{{balance.busunit}}</p>
<p class="list-group-item-text">{{balance.date}}</p>
</div>
<div class="col-sm-4">
<p class="pull-right">${{balance.amount}}</p>
</div>
</div>
</button>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<div class="row vertical-align">
<div class="col-sm-6">
<p><span class="fa fa-user"> <strong>Sally Perkins</strong></span> <span>12345678</span></p>
</div>
<div class="col-sm-6">
<p class="pull-right">Dec 17, 2015</p>
</div>
</div>
<table class="table table-default">
<tr ng-repeat="total in totals track by $index">
<td>{{total.paytype}}</td>
<td>{{total.billing}}</td>
<td>{{total.busunit}}</td>
<td>{{total.amount}}</td>
</tr>
<hr>
<button class="btn btn-primary btn-block">Charge $0.00</button>
</div><!--closeright-hand column-->
</div>
</div>
</div>

I wouldn't use ng-submit. I would use ng-click at the buttons so you can pass the current object of ng-repeat that you can use inside of your addPayment method.
Also the currency filter is useful for displaying the amount values. Filters are used like this {{ number | currency }}. You can read more about it here.
Your markup is OK but hard to read during development of your app. I would recommend to keep the markup as simple as possible and improve styling later.
Please have a look at your updated code below or in this jsfiddle.
angular
.module('myApp', [])
.controller('BillingCtrl', function($scope) {
$scope.payments = [{
id: '1',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 10.00
}, {
id: '2',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 20.00
}, {
id: '3',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 35.00
}, {
id: '4',
paytype: 'Copay',
billing: 'Epic',
busunit: 'Ohio Physicians',
amount: 75.00
}
];
$scope.outstanding = [{
busunit: 'Ohio Physicians',
date: 'Fri, 18 Dec 2009 20:28:37 GMT',
amount: 100.00
}, {
busunit: 'Ohio Physicians',
date: 'Wed, 06 Apr 2012 20:28:37 GMT',
amount: 100.00
},
];
$scope.totals = [];
$scope.total = 0;
var calcTotal = function() {
var sum = 0;
angular.forEach($scope.totals, function(total) {
sum += total.amount;
});
return sum;
}
$scope.addPayments = function(payment) {
//if ($scope.totals.indexOf(i) <= 1) {
$scope.totals.push(payment);
$scope.total = calcTotal();
//console.log(payment, $scope.total);
//}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller="BillingCtrl" ng-app="myApp">
<div class="container-fluid">
<hr>
<div class="row">
<div class="col-md-5">
<h4>Today's Payment</h4>
<form role="form">
<div class="list-group">
<button type="submit" value="Submit" class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading" ng-model="paytype">Copay</p>
</div>
<div class="col-sm-4">
<form class="form-inline">
<div class="form-group">
<label class="sr-only" for="InputAmount">Amount (in dollars)</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="InputAmount" placeholder="Amount" ng-model="amount">
</div>
</div>
</form>
</div>
</div>
</button>
<button type="button" class="list-group-item" ng-repeat="payment in payments" ng-click="addPayments(payment)">
<!-- ng-model="selectedItem"> -->
<div class="row vertical-align">
<div class="col-sm-4">
<p class="list-group-item-heading">{{payment.paytype}}</p>
</div>
<div class="col-sm-8">
<p class="pull-right">${{payment.amount}}</p>
</div>
</div>
</button>
<button type="button" class="list-group-item">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">Other</p>
</div>
<div class="col-sm-4">
<span class="glyphicon glyphicon-chevron-right pull-right"></span>
</div>
</div>
</button>
</div>
</form>
<br>
<h4>Outstanding Balances</h4>
<div class="list-group">
<button type="button" class="list-group-item" ng-repeat="balance in outstanding" ng-click="addPayments(balance)">
<div class="row vertical-align">
<div class="col-sm-8">
<p class="list-group-item-heading">{{balance.busunit}}</p>
<p class="list-group-item-text">{{balance.date}}</p>
</div>
<div class="col-sm-4">
<p class="pull-right">${{balance.amount}}</p>
</div>
</div>
</button>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-6">
<div class="row vertical-align">
<div class="col-sm-6">
<p><span class="fa fa-user"> <strong>Sally Perkins</strong></span> <span>12345678</span></p>
</div>
<div class="col-sm-6">
<p class="pull-right">Dec 17, 2015</p>
</div>
</div>
<p>
{{total | currency }}
</p>
<table class="table table-default">
<tr ng-repeat="total in totals track by $index">
<td>{{total.paytype}}</td>
<td>{{total.billing}}</td>
<td>{{total.busunit}}</td>
<td>{{total.amount | currency }}</td>
</tr>
<hr>
<button class="btn btn-primary btn-block">Charge $0.00</button>
</div>
<!--closeright-hand column-->
</div>
</div>
</div>