Newbie to angularjs.trying to display data from json nested object like this
enter image description here
my html code is
<a rel="extranal" data-val="<%rcds%>" ng-repeat="rcds in rcd" class="international" id="<%rcds.id%>">
<span><img ng-src="<% rcds.routes.subroutes %>"/> <% rcds.subroutes[0].xyz%></span>
<div class="departure-time"><% rcds.subroutes[0].abc %></div>
</a>
want to display the data subroutes in the ng-repeat based on the condition of legtype in the json.how to do this.
if you want show your object as JSON the only thing that you need is write {{rcds | json}}
Otherwise if you want to navigate your nested object you should do somethings like:
<div ng-repeat="rcds in red">
<div ng-repeat="route in rcds.routes">
<!-- route element --->
<div ng-repeat="depart in route.depart">
<!-- depart element --->
<div ng-repeat="subroute in route.subroutes">
<!-- subroute element -->
</div>
</div>
</div>
</div>
Related
with a custom module, I have added the two fields header and footer to every res.company object. These are fields of the type binary.
I now want to display them in my document layout in qweb.
Unfortunately, odoo tells me
'base.document.layout' object has no attribute 'header'
This is what my layout looks like
<?xml version="1.0"?>
<t t-name="web.external_layout_boxed">
<div t-attf-class="header o_company_#{company.id}_layout" t-att-style="report_header_style">
<div class="o_boxed_header">
<div class="row mb8">
<div class="col-6">
<!--HERE--> <img t-if="company.logo" t-att-src="image_data_uri(company.header)" alt="brief_header"/>
</div>
<div class="col-6 text-right mb4">
<h4 class="mt0" t-field="company.report_header"/>
<div name="company_address" class="float-right mb4">
<span class="company_address" t-field="company.partner_id" t-options="{"widget": "contact", "fields": ["address", "name"], "no_marker": true}"/>
</div>
</div>
</div>
</div>
</div>
<div t-attf-class="article o_report_layout_boxed o_company_#{company.id}_layout" t-att-data-oe-model="o and o._name" t-att-data-oe-id="o and o.id" t-att-data-oe-lang="o and o.env.context.get('lang')">
<div class="pt-5">
<t t-call="web.address_layout"/>
</div>
<t t-raw="0"/>
</div>
<img t-if="company.logo" t-att-src="image_data_uri(company.footer)" alt="brief_footer"/>
</t>
as you can see I am trying to access the header with company.header
the pictures appended show you that the fields exist on the type.
What am I doing wrong? How can I correctly display the uploaded images in the external_layout_boxed?
When rendering the document, the company variable is set to wizard object not to the user company. Odoo will try to access header and footer in base.document.layout model.
To fix that issue, alter the document layout model like following:
class BaseDocumentLayout(models.TransientModel):
_inherit = 'base.document.layout'
header = fields.Binary(related="company_id.header")
footer = fields.Binary(related="company_id.footer")
You can find an example in l10n_de module where they created a new report layout and altered base.document.layout to use new fields like street, city or bank_ids
I want to use NG-ZORRO-andt pagination in the Html page, it's showing in my browser but how do I link the data from the api with the pagination?
This is my Html code
<div class="col-md-6 col-lg-4 col-xl-3" *ngFor="let course of peopleHome"> //I want to paginate this data
<div class="card-blog">
<a href="#">
<img src="../assets/images/image10.jpg" alt="" class="img-blog" />
</a>
<div class="card">
<a href="#">
<h4 class="title-blog">{{course.people_title}}</h4>
</a>
</div>
</div>
</div>
<nz-pagination [nzPageIndex]="1" [nzTotal]="peopleHome.length" [nzPageSize]="10"> </nz-pagination>
</div>
So please how can i link my response to nz-pagination?
You are using nz-pagination without any work with your array. How an array should understand that you want to get a part of it? There is two option to paginate your array:
Use nz-table
Use (nzPageIndexChange) and (nzPageSizeChange) methods of nz-pagination to filter your array
I have a reactive input form with a dynamic amount of inputs that I need to add form controls to.
The parent control Mammals will contain a variable amount of MammalId's, and each MammalId will contain a FormArray of variable length.
I have created typescript code that will generate the form as I described, however, I haven't been able to set my form to my HTML.
And an example of my generated form:
I've tried mapping the form to my html in the following way:
<form [formGroup]="inputForm">
<div *ngFor="let mammal of Mammals; let i = index">
<div *ngFor="let id of mammal.ids; let z = index">
<!-- parent form control -->
<div [formGroupName]="mammals">
<!-- mammals[i].id resolves to 'mammalIdx' -->
<div [formGroupName]="mammals[i].id">
<!-- this should map as the controls Form Array -->
<input [formControlName]="z">
</div>
</div>
</div>
</div>
</form>
But when I try and run this, I get:
Error: Cannot find control with unspecified name attribute
How can I set my html to my form values?
Thank you
The parent control Mammals will contain a variable amount of MammalId's, and each MammalId will contain a FormArray of variable length.
As per my understand the arry you expected may be like this
[
{
"Mammals":[
{
"mammalId":[
{
}
]
}
]
}
]
for that above array the form will be like this
this.inputForm = this.fb.group({
Mammals: this.fb.array([}
mammalId: this.fb.array([{
z: ''
}
])}
])
})
for that above array html should be like this
HTML
<form [formGroup]="inputForm">
<div formArrayName="Mammals">
<div *ngFor="let mammal of inputForm.get('Mammals'); let i = index" [formGroupName]="i">
<div formArrayName="mammalId">
<div *ngFor="let id of mammal.get(mammalId); let z = index" [formGroupName]="z">
<!-- parent form control -->
<!-- mammals[i].id resolves to 'mammalIdx' -->
<!-- this should map as the controls Form Array -->
<input [formControlName]="z">
</div>
</div>
</div>
</div>
</div>
</div>
</form>
It may be helps you
Below I have a for-each loop using knockout.js.
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="text: $data.name"></span>
</div>
</div>
I need to have the HTML Element with an id or name or something that reflects a unique value related to the $data.name value, as another method runs asynchronously, and needs to know which HTML element to update.
Ideally, it would look something like this, I guess:
<div data-bind="foreach:Stuff">
<div class="row">
<span id="data-bind='text: $data.name'" data-bind="text: $data.name"></span>
</div>
</div>
I have found a knockout syntax that applies values during runtime to specified attributes:
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="attr: { id: $data.name}"></span>
</div>
</div>
Are you looking for this
<div data-bind="foreach:Stuff">
<div class="row">
<span data-bind="text: $data.name,attr:{id:$data.name}'"></span>
</div>
</div>
Here name is a observable i believe when ever there is change in name in stuff it will automatically updates its value & attr:{id}just to give a dynamic id to element using available bindings .
I have the following html code on the page received by mechanize (agent.get):
<div class="b-resumehistorylist-views">
<!-- first date start-->
<div class="b-resumehistory-date">date1</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time1</div>
company1</div>
<!-- second date start -->
<div class="b-resumehistory-date">date2</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time2</div>
company2
</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time3</div>
company3</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time4</div>
company4</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time5</div>
company5</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time6</div>
company6</div>
<div class="b-resumehistory-company">
<div class="b-resumehistory-time">time7</div>
company7</div>
...
</div>
I need to search inside the div with class="b-resumehistorylist-views" each date.
Then find all divs between two div-dates and link each item to this particular date.
The problem is that each item (div class = b-resumehistorylist-views) is not inside div=b-resumehistorylist-views.
At final stage I need to receive the following array:
array = [ [date1, time1, company1, companylink1], [date2, time2, company2, companylink2], [date2, time3, company3, companylink3],[date2, time4, company4, companylink4] ]
I know that I must use method search with text() option, but I cannot find the solution.
My code right now can parse all companies information between div class=b-resumehistory-company, but I need to find right date.
It would be the same thing as before, just some of the class attributes have been changed:
doc = agent.get(someurl).parser
doc.css('.b-resumehistory-company').map{|x| [x.at('./preceding-sibling::div[#class="b-resumehistory-date"][1]').text , x.at('.b-resumehistory-time').text, x.at('a').text, x.at('a')[:href]]}