Develop Reference

Vue.js: Changing background color not working

I'm fetching some content with Axios, looping over an array of objects, and trying to display a few elements with different background colors, but I can't make it work.
This is what I got so far:
<template>
<div class="container">
<div v-for="card in cards" :key="card.id" class="list">
<div class="card-container" v-if="card.id == 1234 || 1236">
<div class="card-container" v-bind:style="background">
</div>
<div class="card">
<p class="card-title">{{ card.title }}</p>
</div>
<div class="card">
<p class="card-short">{{ card.short }}</p>
<router-link to="">See more</router-link>
</div>
</div>
</div>
</div>
</template>
import axios from 'axios';
export default {
name:'Test',
data(){
return {
cards: Object,
background:{
backgroundColor:'red'
}
}
},
What the object looks like
} "cards":[
{"id": 1237,"name": "Card 1", bg_color:"green"},
{"id": 1236,"name": "Card 2", bg_color:"yellow},
{"id": 1234,"name": "Card 3", bg_color:"red},
{"id": 1233,"name": "Card 4", bg_color:"blue},
] here

Because your content is not inside your card-container which you have styled.
<template>
<div id="app">
<div class="container">
<div v-for="card in cards" :key="card.id" class="list">
<div class="card-container" v-if="card.id == 1234 || 1236">
<div class="card-container" v-bind:style="background">
<div class="card">
<p class="card-title">{{ card.title }}</p>
</div>
<div class="card">
<p class="card-short">{{ card.short }}</p>
<router-link to="">See more</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

Bind Image From Array To Vue

Can I ask for help? How do you bind an image to a vue or simply put, how do you render an image from the array to vue? I will show you my code and How I have done it and explain it carefully to you.
Inside my template, I have this UL that displays 3 items inside my array. I wanted to retrieve my images from the array that I created on my javascript code.
<ul class="list-rendering">
<li v-for="item in items" v-bind:key="item">
<v-card style="padding: 10px;">
<div class="img-cont">
<v-img :src="require('#/assets/section/about.jpg')"></v-img>
</div>
<div class="text-cont">
<br>
<base-subheading>{{ item.name }}</base-subheading>
<h5>{{ item.price }}</h5>
</div>
</v-card>
</li>
</ul>
export default {
data () {
return {
items: [
{
img: "#/assets/section/about.jpg",
name: "Cuppy Cake",
price: "$20.00"
},
{
img: "#/assets/section/social.jpg",
name: "Red Velvet Cake",
price: "$4.99"
},
{
img: "#/assets/section/testimonials.jpg",
name: "Carrot Cake",
price: "$3.00"
}
]
}
}
}

Try This...
<ul class="list-rendering">
<li v-for="item in items" v-bind:key="item">
<v-card style="padding: 10px;">
<div class="img-cont">
<img :src="item.img" alt="loading...">
</div>
<div class="text-cont">
<br>
<base-subheading>{{ item.name }}</base-subheading>
<h5>{{ item.price }}</h5>
</div>
</v-card>
</li>
</ul>

Try this
<ul class="list-rendering">
<li v-for="item in items" v-bind:key="item">
<v-card style="padding: 10px;">
<div class="img-cont">
<v-img :src="require(item.img)"></v-img>
</div>
<div class="text-cont">
<br>
<base-subheading>{{ item.name }}</base-subheading>
<h5>{{ item.price }}</h5>
</div>
</v-card>
</li>
</ul>
You need require(ITEM.IMG) to render the image if you are using an alias.
If you are using relative path then you can straight away use :src="item.img"

Nested ng-repeat and push object

I have written an API which consumes this JSON
{
"savedBy": "1",
"symptom": "new",
"questionSet": [{
"question": "This is question 1",
"options": [{
"values": "okasdsad"
},
{
"values": "asdsad",
"subQuestionSet": [{
"question": "This is question 1",
"options": [{
"values": "okasdsad"
},
{
"values": "oaskdosakdo"
},
{
"values": "yoyoyo"
},
{
"values": "nonono"
}
]
}]
},
{
"values": "yoyoyo"
},
{
"values": "nonono"
}
]
}]
}
Now I have written the front-end in angular so that I can send this JSON value by the form,
HTML.
<div class="question" ng-repeat="qItem in questionVo track by $index">
{{questionVo}}
<div class="col-md-12">QUS {{$index+1}}
<input type="text" ng-model="qItem.question" class="form-control" id=""></div>
{{question}}
<div class="form-inline col-md-10 col-md-offset-2">
<div class="form-group" ng-repeat="items in optionsVo track by $index">
{{optionsVo}}
<label>{{$index+1}}</label><input ng-model="items.values" type="text" class="form-control" id="">
<i class="fa fa-plus-square" ng-click="addoptionsVo(items)"></i>
<i class="fa fa-minus-square" ng-click="optionsVo.splice($index, 1)"></i>
<button class="btn btn-primary" ng-click="showSubset()">Add Subset</button>
<!--------subset ----->
<div class="question" ng-if="showSubsetView == true" ng-repeat="SubqItem in ssss track by $index">
<div class="col-md-12">QUS {{$index+1}}
<input type="text" ng-model="question" class="form-control" id=""></div>
<div class="form-inline col-md-10 col-md-offset-2">
{{itemsz.ssss}}
<div class="form-group" data-ng-repeat="Subitems in optionsVo track by $index">
<label>{{$index+1}}</label><input type="text" class="form-control" id="">
<i class="fa fa-plus-square" ng-click="addoptionsVo($index)"></i>
<i class="fa fa-minus-square" ng-click="optionsVo.splice($index, 1)"></i>
<button class="btn btn-primary">Add Subset</button>
</div>
<div class="clearfix"></div>
<div class="btn-margin"><button class="btn btn-primary">Add More</button></div>
</div>
<div class="clearfix"></div>
</div>
<!--------subset ----->
</div>
<div class="clearfix"></div>
<div class="btn-margin"><button class="btn btn-primary">Add More</button></div>
</div>
<div class="clearfix"></div>
</div>
Angular JS
$scope.questionVo = [{
question: '',
}];
$scope.addquestionVo = function($event) {
$scope.questionVo.push({
question: '',
});
};
$scope.optionsVo = [{}];
$scope.addoptionsVo = function($event) {
$scope.optionsVo.push({});
};
PROBLEM
1.)when i add second question in the array the options remain same like in the 1st question
2.) i want to make json same as the api json in the question through angular
also
"options": [{
"values": "okasdsad"
},
"subQuestionSet": [{
"question": "This is question 1",
"options": [{
"values": "okasdsad"
},
{
"values": "oaskdosakdo"
},
{
"values": "yoyoyo"
},
{
"values": "nonono"
}
]
}] {
"values": "okasdsad"
}
]
can anyone help me with this?
anyone>?
PLUNKER https://plnkr.co/edit/33mVEQ?p=preview
EDIT : i found strange issue with plunker / in chrome it is giving {[ "values": "asdsa"]] but in plunker it is becoming [{ "values": "asdsa" }]

Find the below approach that matches your requirement. The options should be inside the question array.
'use strict';
var app = angular.module('medparser',[]);
app.controller('addquestionController', function($scope, $http, $window, $rootScope, $timeout) {
$scope.addoptionsVo = function(no) {
$scope.questionVo[no].options.push({
values: ''
});
};
$scope.questionVo = [{
question: '',
options: [{
"values": ""
}]
}];
$scope.addquestionVo = function($event) {
console.log("ASDSA");
$scope.questionVo.push({
question: '',
options: [{
"values": ""
}]
});
};
//////////////////////////////////////////////
$scope.showSubsetView = false;
$scope.showSubset = function() {
$scope.showSubsetView = true;
};
});
////////////////////////////////////////
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="medparser" ng-controller="addquestionController">
<div class="intro-header">
<div style="height:1px"></div>
<nav class="navbar-default" role="navigation">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="index1.html">
<div class="logo">
<img src="images/logo.png"></div>
</a>
</div>
<div class="header-text">
Questionnaire For Doctors
</div>
</div>
</nav>
</div>
<div class="container header-padding">
<div class="col-md-6">Symptoms</div><br>
<div class="col-md-6"><input type="text" ng-model="keyword" class="form-control" ng-keyup="searchsymptoms(keyword)" typeahead="state.name for state in symptomsList | filter:$viewValue | limitTo:8" id=""></div>
<div class="clearfix"></div>
question : {{questionVo}}
<div class="question" ng-repeat="qItem in questionVo track by $index">
<div class="col-md-12">QUS {{$index+1}}
<input type="text" ng-model="qItem.question" class="form-control" id=""></div>
{{question}}
<div class="form-inline col-md-10 col-md-offset-2">
<div class="form-group" ng-repeat="items in qItem.options track by $index">
<label>{{$index+1}}</label><input ng-model="items.values" type="text" class="form-control" id="">
<i class="fa fa-plus-square" ng-click="addoptionsVo(items)"></i>
<i class="fa fa-minus-square" ng-click="optionsVo.splice($index, 1)"></i>
</div>
<div class="clearfix"></div>
<div class="btn-margin"><button class="btn btn-primary" ng-click="addoptionsVo($index)">Add Option</button></div>
</div>
<div class="clearfix"></div>
</div>
<div class="pull-left header-padding"><button class="btn btn-primary" ng-click="addquestionVo($event)">Add Question</button></div>
<div class="pull-right header-padding"><button class="btn btn-primary">Save</button></div>
</div>
</body>

show div based on selected $index from list angularjs

Here is my HTML code
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="showData($index)" ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-repeat="field in Data" >
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
<ul class="list-group p-body">
<li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
</ul>
</div>
</div>
I want to show the col-md-8 div data based on index selected from the field.name from col-md-4 list group.
Here is my Sample Data
{
"scenarios": [{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
},
{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
},
{
"values": ["value 1",
"value 2",
"value 3"],
"title": "some title"
}],
"description": "",
"name": "Some name "
}
The name is displayed on the left (in col-md-4)and the corresponding data has to be shown on the right(in col-md-8).
But I can't figure out how to do it. Any help ?

declare a scope varible to store selected index, depend on selected index show other div,
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item" ng-click="selectedIndex = $index" ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<div ng-show="selectedIndex == $index" ng-repeat="field in Data">
<div class="panel panel-primary" ng-repeat="scenario in field.scenarios track by $index">
<div class="panel-heading ">
{{ scenario.name }}
</div>
<ul class="list-group p-body">
<li class="list-group-item" ng-repeat="values in scenarios.values track by $index">{{ value }}</li>
</ul>
</div>
</div>

If you only are going to display one field object, I would just do the following:
<div class="col-md-4">
<ul class="list-group text-left">
<a href="#" class="list-group-item"
ng-click="selectedField = field"
ng-repeat="field in Data">
{{ field.name }}</a>
</ul>
</div>
<div class="col-md-8">
<!-- only if one is selected -->
<div ng-if="selectedField">
<div class="panel panel-primary"
<!-- get data from 'selectedField' -->
ng-repeat="scenario in selectedField.scenarios track by $index">
<!-- other stuff -->
</div>
</div>
</div>

Using Angular ng-if without ng-repeat?

I am returning an array of data like such:
"Tools": [
{
"name": "Online Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": true,
"alert": null
},
What I am trying to get it to do is simply render the div is the "isOn" is set to true. Wouldn't think I would have to do this in an ng-repeat since I am laying it out in the code for each scenario as shown below (as each div contains different text and graphic):
<div ng-if="pptTools.isOn ==true" class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
Seems to check the ng-if and tries to render in dev tools, but no div is show. Here is a screenshot of that:
Any help on this please?
Thanks much.

You should return an object instead of an array:
"Tools": {
onlineenrollment: {
"name": "Online Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": true,
"alert": null
},
...
}
Then you can check each item without the ng-repeat
<div ng-if="ppt.Tools.onlineenrollment.isOn" class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
Alternatively you can reference items in an array with their index, but you shouldn't unless you are completely confident that the order will be consistent every time. I wouldnt do this...
<div ng-if="ppt.Tools[0].isOn" class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
You could also check out https://docs.angularjs.org/api/ng/function/angular.forEach

I believe you need a filter. You can pass this array to your filter and use it in ng-repeat. Let's say this array is saved in the controller as $scope.tools and you named your filter as onTools. Then you'd write your code like this (I assumed each tool had attributes for url, img src and name and you want to display them):
<div class="toolTile col-md-3" ng-repeat="tool in tools | onTools">
<a href="{{tool.url}}">
<img src="{{tool.imgSrc}}" >
<p>{{tool.name}}</p>
</a>
</div>

Try with below code.
---------------------
<div ng-app="myApp">
<div ng-controller="PatientController">
<div ng-repeat ="pptTools in pptToolsArray">
<div ng-if="pptTools.isOn ==true" class="toolTile col-md-3">
<a href="#/claimEnter">
<img src="ppt/assets/toolIcons/submiticon.svg" >
<p>Submit a Claim for Reimbursement</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/commuterOrder">
<img src="ppt/assets/toolIcons/commutericon.svg" >
<p>GoNavia Commuter</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/accessHsa">
<img src="ppt/assets/toolIcons/hsa.svg" >
<p>Access my HSA</p>
</a>
</div>
<div ng-if="ppt.Tools.isOn==true" class="toolTile col-md-3">
<a href="#/clearSwipe">
<img src="ppt/assets/toolIcons/clearswipe.svg" >
<p>Clear a Swipe</p>
</a>
</div>
-----
</div>
</div><div>
var myApp = angular.module('myApp', []);
function SampleController($scope) {
$scope.pptToolsArray= [{
"name": "Online Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": true,
"alert": null
},{
"name": "offline Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": false,
"alert": null
},{
"name": "No Enrollment",
"descr": "Allows participants to enroll in benefits for future plans",
"position": 3,
"isOn": true,
"alert": null
}];
}