I made a migration from Symfony3.4 to SF4/Flex.
I was using assetic/bundle in SF3.4 but now I try to replace it with symfony/webpack-encore.
when I started using everything was okay but in my page I can't display the values returned in my webservice.
In my topTripsController a used a webservice to get a list of objects then I try to render them
<div ng-controller="topTripsController as homeNotLogged">
<div data-ng-repeat="trip in homeNotLogged.trips track by $index" >
<a ng-if="trip.cover.url " id="trip-||$index||">
<h2 class="trip-title" style="font-size: 14px; font-weight: bold" ng-bind="trip.name | capitalize">
</h2>
<div class="trip-date">
<span class="trip-title-first_name" ng-bind="trip.profile.name"> </span>
<span > · </span>
<span class="trip-title-from-date" ng-bind="trip.fromDate | date:'MMM, y'"> </span>
</div>
</a>
</div>
</div>
{% block javascripts %}
{{ parent() }}
<script src="{{ absolute_url(asset('build/js/pages/index.js')) }}" ></script>
{% endblock %}
when I write {{trip }} i got this result
{"Id":15,"Profile":{"Id":2,"Name":"Alex Fergusson","URLname":"alex","Picture":{"Url":"d2d1117d023f81739aa7681fb60b98e92208d8c7.jpeg","Alt":""}},"Slug":"the-ultimate-one-week-istanbul-itinerary-and-guide","Themes":[{"Id":938,"Name":"Art & Design","Slug":"art-design"},{"Id":943,"Name":"History","Slug":"history"},{"Id":944,"Name":"Local Culture","Slug":"local-culture"}],"Name":"The Ultimate 5 Days Istanbul Itinerary and Guide","Cover":{"Url":"cb33d105cb7eaa59a912fac1df5e9c86d1562588.jpeg"},"Description":"vaoila dsvdvsdvsdv","FromDate":1480118400000,"NbrViews":1405,"NumCheckin":38,"NumPhoto":209,"NumLike":203,"NumComment":24,"Tigr":61.808134736842,"Published":true,"MapLines":true,"ToDate":1511005270,"DatesKnown":true,"Duration":358,"CreatedAt":"2017-07-17T09:05:47+02:00","UpdatedAt":"2018-04-02T15:37:34+02:00","Disable":false,"GooglestaticUrl":"the-ultimate-one-week-istanbul-itinerary-and-guide-travel-itinerary-1509033384.png","MonthViews":0}
if I do {{trip.id}} {{trip.name}} or trip.anything i have no results but I know that these attributes are not empty.
this issue appears only when I used wepback with angularJS#1.5.8 in SF4 project.
Any Ideas?
As the Json suggests, you should do,
{{trip.Id}} {{trip.Profile.Id}} {{trip.profile.Name}}
Related
I am trying to write code in “moto” list.html section. I would like to display all pages from “auta” section with paging. So, I need to display posts from another section with paging.
I use hugo v0.96.
I am not sure, why it’s not working with paging.
Not working code with paging:
{{ $cars := (where .Site.AllPages ".Section" "auta") }}
{{ $paginator := .Paginate $cars }}
{{ range $paginator.Pages}}
<div class="col-xl-3 col-lg-4 col-sm-6">
<h3 class="h6 text-uppercase mb-1"><a class="text-dark product-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
{{ end}}
Working code without paging:
{{ $cars := (where .Site.AllPages ".Section" "auta") }}
{{ range $cars }}
<div class="col-xl-3 col-lg-4 col-sm-6">
<h3 class="h6 text-uppercase mb-1"><a class="text-dark product-name" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
</div>
{{ end}}
Where’s the problem?
Please, help me. Thank you very much
The problem has been solved. .Paginate can be only one time on same page.
I had .Paginate in header (out of this code). And it's not posibble override (by official docs of Hugo)
I want to generate a span element for each saved tag from my collection tag's array.
I use firebase and get in *ngFor loop i get one big span element with all saved tags separated by comma, instead of getting a span for each tag. Is there any way that i can't prevent this from happening. Also i have created an interface for Saved.
Thanks in advance.
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">{{saved?.title}}</h5>
<hr />
<div *ngFor="let tag of saved.tags">
<span class="badge badge-pill badge-primary">{{saved?.tags}}</span>
</div>
<hr /> View
</div>
</div>
//Saved interface in Saved.ts file
export interface Saved {
id: string;
title: string;
tags: string[];
}
Try having your code like this. This should make the span element repeat rather than the div and then make sure to reference the individual tag rather than the array inside.
If the tag has a name / title attribute swap {{ tag }} for {{ tag.title}}
looking at the interface its just {{ tag }}.
<div>
<span *ngFor="let tag of saved.tags" class="badge badge-pill badge-primary">
{{tag}}
</span>
</div>
Reference to Angular docs on using *ngFor to display data.
At the moment, you are referencing the array inside your *ngFor. So, as a result, you should see the whole list of n tags, for n times. If you switch from {{saved?.tags}} to {{tag}}. You will see one div per tag including one span and a single tag inside.
So for getting one span per tag, use it like the following:
<div class="card">
<div class="card-body">
<h5 class="card-title text-center">{{saved?.title}}</h5>
<hr />
<div>
<span class="badge badge-pill badge-primary" *ngFor="let tag of saved.tags">
{{tag}}
</span>
</div>
<hr />
View
</div>
</div>
I'm attempting to define a site wide menu that is displayed within a bootstrap navbar.
Top level config.toml is;
baseURL = "http://localhost/"
languageCode = "en-us"
title = "Localhost"
[menu]
[[menu.main]]
identifier = "page1"
name = "page1"
url = "/page1/"
weight = 0
[[main.menu]]
identifier = "page2"
name = "page2"
url = "/page2/"
weight = 1
[[main.menu]]
identifier = "page3"
name = "page3"
url = "/page3/"
weight = 2
The menu sits within a site-header partial that is being passed in the site context.
index.html
{{ partial "head.html" . }}
<body>
{{ partial "site-header.html" . }}
<div class="row">
<div class="col-12">
<main>
<section>
<h1>{{.Title}}</h1>
</section>
</main>
</div>
</div>
</body>
site-header.html
<header>
<div class="container">
<nav class="navbar navbar-expand-sm navbar-dark ">
<a class="navbar-brand" href="{{ "/" | relURL}}"><img src="/images/Main-Logo-v1-1.png" class="d-inline-block align-top menu-brand-image" alt="Logo"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
<li class="navbar-item {{if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }} active{{end}}">
<a class="nav-link" href="{{ .URL }}" title="{{ .Title }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
</div>
</nav>
</div>
</div>
</header>
The {{range .Site.Menus.main }} seems only to parse the first element within the table array [[menu.main]] as the 'page1' entry is all that is included within the generated html.
I've added some debug printf also which confirms that the range only recognises [[menu.main]] as being an array of 1.
Any ideas, pointers would be appreciated.
Seems like you have misspelled the other menu entries in config.toml menu definition. You are declaring [[main.menu]] instead of [[menu.main]]. The first one is correct though, that's why it appears.
Add pageRef to each menu item in config.toml that should be the same as url.
Source 1: Menus in Hugo
Source 2: Hugo release v0.86.0
I was also facing same problem. when I have started using hugo its version was V0.83.1. when I deploy my website menus where working fine. but after some days menus where not displaying.
git hub issue link
after referring above link I have updated to latest version of hugo i.e v0.108.0 and it works. you may check by updating hugo version.
Am using nested ng-repeat to display below JSON ( given sample format actual format is different and have lot of properties ). When list size is 100 then in IE it takes more than 25 seconds to render.
I tried using "track by" & "oen way binding" but no luck.
Data
{name: "name1", placeVisited: [{city: 'city1', state: "state1"}]}
HTML
<div ng-repeat="item in items track by item.name" class="col-md-4 col-sm-6" style="float: none; display:inline-block; vertical-align: top; cursor: pointer" >
<a class="tile" id="tile{{$index}}" >
<div class="tile-head">
<div class="tile-ont-img"><img src="user.png" class="img-responsive" > </div>
<h4>{{::item.name}}</h4>
</div>
<div class="tile-body" >
<p ng-repeat="place in ::item.placeVisited track by port.state" >
State {{::place.state}}
</p>
</div>
</a>
</div>
Please share your idea to improve nested ng-repeat performance in IE.
I've got the following markup:
<li ng-repeat="month in months">
<!-- NOTE THAT THIS IS WORKING IN ALL BROWSERS -->
<div class="cm-month-grid" ng-style="{width:{{month.pos.width}}+'px', left:{{month.pos.left}}+'px'}">
<div class="cm-month-title" title="{{month.date.format('DD.MM.YY')}} {{month.pos | json}}">{{month.date.format('MMM.YY')}}</div>
<div class="cm-month-border"></div>
</div>
</li>
that runs fine, but this is not:
<li ng-repeat="unit in units | filter: filter.text">
<div class="cm-periods">
<!-- BUT THIS IS NOT WORKING... WHY....
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{width:{{period.pos.width}}+'px', left:{{period.pos.left}}+'px'}">jalla</div>
</div>-->
<!-- WORKING IN CHROME ONLY -->
<div ng-repeat="period in unit.periods" class="cm-period" style="width:{{period.pos.width}}px; left:{{period.pos.left}}px;" data-period="{{.}}}">
<span>{{period.start.format('DD.MM.YY')}}</span>
</div>
<!-- -->
</div>
</li>
Full example could be seen here: http://plnkr.co/edit/aZsZEM?p=preview
I know there are issues with style and IE, that's why I'm using the ngStyle, but it does not update it style (try clicking on the zoom in the full example in IE)
Thanks for any help
Larsi
You are using ng-style with double curly brackets. As far as I know that's not valid in an expression.
Try this:
<div ng-repeat="period in unit.periods" class="cm-period" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}" data-period="{{.}}}">
<span >{{period.start.format('DD.MM.YY')}}</span>
<div style="background: pink;" ng-style="{'width':period.pos.width+'px', 'left':period.pos.left+'px'}">jalla</div>
</div>
</div>
Hmm, still looks messy to me. But, HEY! it zooms! (in FF)
Uh, forgot: Forked Plunk