I'm using PrimeNG's p-dropdown. The options are an array of labels and a value. Every time after a change it is colored red at bottom.
Before selection, it looks like this:
After selection, it looks like this:
HTML code:
<div>
<span class="md-inputfield">
<label class="floatPlaceHolder">{{schema.description | translate }}</label>
<p-dropdown [disabled]="schema.readOnly==true?true:false" appendTo="body" [formControl]="control" [options]="schema.oneOf"
[autoWidth]="false" appendTo="body" [filter]="schema.oneOf&&schema.oneOf.length>5"></p-dropdown >
</span>
</div>
Typescript Code:
"oneOf": [
{
"value": 0,
"label": ""
},
{
"value": 4,
"label": "A"
},
{
"value": 2,
"label": "B"
},
{
"value": 1,
"label": "C"
}
]
Related
I am a newbie with Vue and I am trying to run an IF statement inside two v-fors.
Basically I am trying to compare a value from one array of objects to a value of another array of objects and if true, render value from array of objects No 2.
Here is the code.
<div v-bind:class="[isActive ? 'projectsWorkingOnActive' : 'projectsWorkingOnInactive']" v-for="rec in listOfEmployees" v-bind:key="rec.id" >
<div v-for="proj in dummyProjectsData" v-bind:key="proj.id">
<div v-if="rec.name.display_value == proj.task_owner">
<h3>Projects Working On</h3>
<ul>
<li>{{proj.projects_working_on.project_name}}</li>
<li><submitbutton button_label="Hide Projects" #click="toggleClass()"></submitbutton></li>
</ul>
</div>
</div>
</div>
And here are my 2 arrays of objects.
const dummyProjectsData = [
{
ID: "44000005501077",
task_owner: "Denis Denchev",
projects_working_on: [
{
"project_name": "Project-1",
"project_id": "195000002362044"
},
{
"project_name": "Project-2",
"project_id": "195000002362045"
},
{
"project_name": "Project-3",
"project_id": "195000002362046"
},
]
},
{
ID: "44000005501078",
task_owner: "Jake Jones",
projects_working_on: [
{
"project_name": "Project-2",
"project_id": "195000002362044"
},
{
"project_name": "Project-5",
"project_id": "195000002362045"
},
{
"project_name": "Project-3",
"project_id": "195000002362046"
},
]
},
]
And the second array...
const listOfEmployees = [
{
"ID": "44000005527013",
"name": {
"display_value": "Denis Denchev",
"first_name": "Denis",
"last_name": "Denchev",
"prefix": "",
"suffix": "",
}
}
]
What am I doing wrong? It must be something silly that I am missing? Or can I not do if statement taking value from two v-for's ?
The problem is that proj.projects_working_on is an array of multiple projects, but you are trying to access a property on it like an object. Change to something like:
<div v-bind:class="[isActive ? 'projectsWorkingOnActive' : 'projectsWorkingOnInactive']" v-for="rec in listOfEmployees" v-bind:key="rec.id" >
<div v-for="proj in dummyProjectsData" v-bind:key="proj.id">
<div v-if="rec.name.display_value == proj.task_owner">
<h3>Projects Working On</h3>
<ul>
<li v-for="p in proj.projects_working_on" v-bind:key="p.project_id">
{{ p.project_name }}
</li>
<li><submitbutton button_label="Hide Projects" #click="toggleClass()"></submitbutton></li>
</ul>
</div>
</div>
</div>
I'm rendering some checkboxes based on an array and using a data attribute as the v-model. I'm using Vue2.
However, I end up having all checkboxes checked for some reason, when the value of the v-model equals 1 (I guess it treats it as a bool instead of a number).
I tried v-model.number - without any luck. What am I doing wrong?
My template:
<div v-for="category in categories">
<input
type="checkbox"
v-model.number="item.category"
:id="'category_' + category.id"
:value="category.id"
#change="save"
/>
<label>{{ item.category }} : {{ category.id }}</label>
</div>
Model Data (item.category):
1
Categories:
[
{
"id": 2,
"name": "news Category 0"
},
{
"id": 7,
"name": "news Category 1"
},
{
"id": 12,
"name": "news Category 2"
},
{
"id": 17,
"name": "news Category 3"
},
{
"id": 22,
"name": "news Category 4"
},
{
"id": 27,
"name": "news Category 5"
},
// other values
]
Screenshot (Ive added item.category and category.id as label text to make it more clear):
As you are using Multiple checkboxes, you have to give an array in v-model, so your item.category has to be an array: [1].
See the working fiddle: https://jsfiddle.net/mimani/y36f3cbm/
var demo = new Vue({
el: '#demo',
data() {
return {
categories: [{
"id": 2,
"name": "news Category 0"
}, {
"id": 92,
"name": "news Category 8"
}, {
"id": 97,
"name": "news Category 9"
}],
item: {
category: [1]
}
};
}
})
Can anyone please help to solve my problems.
in angular js. I have below json and HTML file
test.json
{
"list": [
{
"id": 1,
"Name": "Name 1"
},
{
"id": 2,
"Name": "Name 2"
}
]
}
array.json
{
"list": [
{
"id": 1,
"time": [
{
"time1": "10.00am",
"time2": "10.10am",
"time3": "10.20am",
"time4": "10.30am"
}
]
}
I need output like below
id: 1
Name: Name1
time: 10.00am, 10.10am, 10.20am, 10.30am
id: 1
Name: Name1
time: 10.00am, 10.10am
Thanks in Advance
HTML
<div class="abc" ng-repeat="data in datas[0].list">
ID:{{data.id}}<br>
Name:{{data.Name}}<br>
Time:
<ANY ng-repeat="times in data.time[0]">
{{times}}
</ANY>
<hr>
</div>
Controller
$scope.datas=[{
"list": [
{
"id": 1,
"Name": "Name 1",
"time": [
{
"time1": "10.00am",
"time2": "10.10am",
"time3": "10.20am",
"time4": "10.30am"
}
]
},
{
"id": 2,
"Name": "Name 2",
"time": [
{
"time1": "10.00am",
"time2": "10.10am"
}
]
}
]
}];
You can use ng-repeat in your case something link below.
<span ng-repeat="list in myList">
Id : {{list.id}}<br/>
Name : {{list.Name}}<br/>
<span ng-repeat="tm in times | filter:{id: list.id}">
Time : <span ng-repeat="tim in tm.time">
<span ng-repeat="t in tim">
{{t}}{{$last ? '' : ', '}}
<span>
</span>
</span><br/>
</span>
Here is the working pen for you.
Codepen
Here is my json file.
{
"countries":[
{
"country": "India",
"cities" : [{
"name": "Bangalore",
"rank": "40"
},
{ "name": "Mumbai",
"rank": "32"
},
{ "name": "Kolkata",
"rank": "54"
},
{ "name": "Chennai",
"rank": "42"
}]
},
{ "country": "China",
"cities":[{"name": "Guangzhou",
"rank": "111"
},
{ "name": "Fuzhou",
"rank": "21"
},
{ "name": "Beijing",
"rank": "90"
},
{ "name": "Baotou",
"rank": "23"
}]
}
]}
I want to show all the name and rank of all the cities in the html table,
but I am unable to do this.
Angular js code is:
app.controller('cityCtrl1', function($scope, $http){
$http.get("http://localhost:8080/Angular%20Examples/angularCountries/app/json/countriesToCities1.json").success(function(data){
$scope.cities = data.countries;
});
});
Html code is:
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>
Might be I could change the code in controller file for getting the data, but not sure that will work or not.
First thing div inside a tr is not allowed(not working also) - Check this <div> into a <tr>: is it correct?
So I have change format -
<ul class="table" ng-repeat="country in cities.countries">
<li class="city-row" ng-repeat="city in country.cities">
<span class="city-name">{{city.name}}</span>
<span class="city-count">{{city.rank}}</span>
</li>
</ul>
I have created working example - http://plnkr.co/edit/1GTqNPcfigd9XRaAy0vg
Apply your own CSS to display it in table format.
what you are trying to do is,to refer city.states but where as states is not an object of json..change it to city.cities
<tr ng-repeat="city in cities | filter: selectName1">
<div ng-repeat="details in city.cities">
<td> {{details.name}} </td>
<td> {{details.rank}}</td>
</div>
</tr>
I have two JSON formats,
JSON -
[
{
"name":"Alex",
"country":"United States"
},
{
"name":"Jaswanth",
"country":"India"
}
]
AngularJS Code -
I was able to display the output
<div ng-repeat="result in results">
{{result.name}} - {{result.country}}
</div>
But if I change my JSON, I am not able to see the output..
[
{
"info": [
"one",
"two",
{
"id": 944589,
"contractYear": 2014
}
],
"country": "India",
"name": "jaswanth"
},
{
"info": [
"three",
"four",
{
"id": 944589,
"contractYear": 2014
}
],
"country": "US",
"name": "jass"
}
]
How to I change my AngularJS code ?
<div ng-init="init();">
<div ng-repeat="result in data">
{{result.name}} - {{result.country}}
<br/>
<div ng-repeat="(k,v) in result.info">
<span ng-if="v.id">The id is: {{v.id}}</span>
<span ng-if="(!v.id)">{{v}}</span>
</div>
<hr/>
</div>
</div>