I have a list of items that contains organizations and each organization has two properties TargetIsSelected and InfoIsSelected which could be either true or false and are mutually exclusive. When the form loads I want the appropriate option to be selected for each organization row and when the user changes option I would like the changes updated in the underlying model for the respective organization.
My data looks like
$scope.Orgs = [{ "ID": "1", "Description": "Org 1", "TargetIsSelected": false, "InfoIsSelected": true },
{ "ID": "2", "Description": "Org 2", "TargetIsSelected": false, "InfoIsSelected": false },
{ "ID": "3", "Description": "Org 3", "TargetIsSelected": false, "InfoIsSelected": false }];
});
and the HTML
<body ng-controller="MainCtrl">
Target | Info
<div data-ng-repeat="org in Orgs">
<input type="radio" name="org{{$parent.$index}}" ng-model="$parent.TargetIsSelected" data-ng-value={{org.TargetIsSelected}}>
<input type="radio" name="org{{$parent.$index}}" ng-model="$parent.InfoIsSelected" data-ng-value={{org.InfoIsSelected}}>
{{org.Description}}
<br />
</div>
<br />
{{ Orgs | json }}
The problem is the default option from data (TargetIsSelected and InfoIsSelected) is not selected when the screen loads and changed option is not propagated to the model for each row. Currently I can select only one option from the entire list of options. I understand ng-repeat creates a child scope so I'm using $parent to reference the model but it doesn't seem to be working. Any help would be appreciated.
I have setup a Plunker
Related
I am using a rest API, sending a GET request and getting the following JSON structure as a result:
{
"Id": "Sample Id",
"Attributes": {
"ReadOnly": false
},
"Children": [
{
"Id": "Sample Id1",
"Attributes": {
"ReadOnly": false
},
"Children": [
{
"Id": "Sample Id2",
"Attributes": {
"ReadOnly": false
}
}
]
},
{
"Id": "Sample Name2",
"Attributes": {
"ReadOnly": false
},
"Children": [
{
"Id": "Sample Id2",
"Attributes": {
"ReadOnly": false
}
}
]
}
]
}
It is basically a file system structure. So it is possible to have N objects(Id, Attributes{}, Children[]) in the root as well as in any other level of the structure.
Trying to explain a little bit better, the root node has its attributes and an array of N children that have its attributes and another Array of N children and so on...
How would be the correct way to handle this situation?
I have created a flat interface structure, looking basically like that:
export interface Hana{
Id: string,
Attributes: {
ReadOnly: string
}
}
I have also created a service and a component as follows:
Service
getHanaStructure(): Observable<Hana[]> {
const hanaStructs = this.http.get<Hana[]>(this.apiUrl);
this.messageService.add('HanaService: fetched struct');
return hanaStructs;
Component
hanaStructures$: Observable<Hana[]>;
getHanaStructure() : void {
this.hanaStructures$ = this.hanaService.getHanaStructure().pipe(map(data=> _.toArray(data)));
}
In order to show the data my HTML template looks like that:
<ul *ngIf="hanaStructures$ | async as hanaStructures else noData">
<li *ngFor="let hana of hanaStructures">
{{hana}}
</li>
</ul>
<ng-template #noData>No Data Available</ng-template>
The first problem is that I don't know to access the information by its key, I can just list their values. When I try something like {{ hana.Id }} instead of just {{ hana }} I got: *
"Property 'Id' does not exist on type 'Hana'"
The second issue is that I can only manage to list the first level data. I don´t know how access the Children of the Children of Children...
I am sure that the API is returning everything I need, but unfortunately I don´t know how to solve the problem.
Thanks,
Filipe
At first I would define the "Children" property in your Hana Interface as List of "Hana" Interfaces (This has some similarity with a resursive approach). Afterwards I would create a seperate Component, which gets displayed if you loop through the first layer of your children. This component should contain a loop of its own to loop through deeper nested components recursively.
Hope this was understandable and helps you. =)
So i have 2 different api request in my vue application. One of them is bringing the all questions.
[ { "id": 20, "question": "Cigarette" }, { "id": 2, "question":
"Alcohol" }, { "id": 3, "question": "Diabetes" }]
In second request is returning what client has checked from the form about these questions.
{ "cigarette": "yes", "alcohol": "yes", "mobile": "+44111111111"}
and so on...
In my form.js file i want to see the checkbox has checked if client has selected that checkbox. In for loop i have this
<li v-for="(ask, askey) in patientQuestions" :key="askey">
<b-form-checkbox v-model="ask.value">{{ ask.question }}</b-form-checkbox>
</li>
How can i auto select this checkboxes. Thanks in advance
It's more difficult than it needs to be because you need something to relate the answer to the question. You'd want something that's the same in both cases and you don't really have that right now. The answers key and question text almost match, but one is lowercase and the other one is not. It would be easier/more reliable if you could for example get the question ID in the answer object.
Given your current data structure, you could do this:
<div id="app">
<ul>
<li v-for="(pq, index) in patientQuestions" :key="pq.id">
<b-form-checkbox value="yes" v-model="answers[pq.question.toLowerCase()]">{{ pq.question }}</b-form-checkbox>
</li>
</ul>
</div>
var app = new Vue({
el: '#app',
data: {
patientQuestions: [{
"id": 20,
"question": "Cigarette"
},
{
"id": 2,
"question": "Alcohol"
},
{
"id": 3,
"question": "Diabetes"
}
],
answers: {
"cigarette": "yes",
"alcohol": "yes",
"mobile": "+44111111111"
}
}
})
Fiddle: https://jsfiddle.net/thebluenile/1bheo648/
I have to build an Angular application that has a single task: It receives JSON data that describe a form structure, e.g.:
{
"textbox": {
"type": "string",
"name": "name",
"maxlength": 30,
"description": "Full Name"
},
"textbox": {
"type": "string",
"name": "email",
"maxlength": 40,
"description": "Email"
},
"date": {
"name": "birthdate",
"description": "Birthdate"
},
"checkbox": {
"name": "subscribe",
"options": [
"Yes",
"No"
],
"default": "No",
"description": "Subscribe?"
},
"button": {
"type": "submit",
"description": "Send"
}
}
And it should display it: (All forms are different with varying elements.)
I'm relatively new to Angular and my initial approach would be to create a simple template that has an ngFor in it, and inside many ngIfs (one for text fileds, one for text area, another for radio button, and so on...) that examine for the "type" of the given form element, and if there is a match, it gets displayed with its attributes written in the JSON.
Is it a good idea to start like this, or should I first learn some more Angular to be able to come up with a more professional solution?
Are things like dynamic and reactive forms in Angular for this purpose, or which part of Angular should I have a deeper understanding in for this task?
I've got a list of items generated by *ngFor in Angular2.
I want each of the items to work as a link to the full page with description of that item.
The generated data is retrieved via json.
As I want to use the items as links, I guess they should have router parameters like that [routerLink]="['/items', item.description]" in order to redirect users to the description page.
The question is how to pass such parameters via json (I can't bind them directly to the link in my html) ?
My item structure (div itemBlock supposed to work as a link):
<div class="itemBlock" *ngFor="let item of items">
<img src="{{item.image}}" alt="Item image" class="item--image">
<h3 class="item--name">{{item.name}}</h3>
<span class="item--number">{{item.number}}</span>
</div>
Json structure:
[
{
"id":"Item 1",
"name": "Item 1 Name",
"image": "./item1.jpg",
"number": "Number 1"
},
{
"id":"Item 2",
"name": "Item 2 Name",
"image": "./item2.jpg",
"number": "Number 2"
},
...,
...
]
I have a json file simular to this:
[{
"name": "testReport",
"type": "Intern",
"description": "Test report for extjs",
"query": "select DATE(sa.startTime)",
"queryFields": [{
"name": "name",
"type": "STRING",
"format": null,
"many": false
}, {
"name": "from",
"type": "DATE",
"format": "yyyyMMdd",
"many": false
}, {
"name": "to",
"type": "DATE",
"format": "yyyyMMdd",
"many": false
}]
In a grid i show the name, type and description. When you click on a button i want to open a new window what is working. But what i need is to open the window and generate a form based on the queryFields. So when i click on the testreport i need to have a textfield(name), a datefield(from) and a datefield(to). Is this possible? And how do i do this :$
Use a SelectionModel (maybe a CheckBoxSelectionModel). The user will select the row they want by checking the check boxes of the rows. Then when they click the display reports button you can use the SelectionModel to find all the selected records and pass the records on to your form which which you can use to create the form or fill the forms fields in whichever you need.
My advice is to look at the API for
GridPanels
SelectionModels
Record
Then design it when you have an understanding of these concepts.