I have a q-table where I get a response from API. In one of the entries, it gives the value of the flag as 0 or 1 which I need to update it as Yes or No.
How can I do this?
I am using q-badge to change the bg color and highlight it but unable to update the text.
<template v-slot:body-cell-processed="props">
<q-td :props="props" >
<q-badge style="background-color:white" :class="props.row.processed==0?'bg-red':'text-black'">
{{ props.row.processed }}
</q-badge>
</q-td>
</template>
I have tries this and it's working fine.
<q-td key="processed" :props="props">
<q-badge style="background-color:white" :class="props.row.processed==0?'bg-red text-white text-weight-bolder':'bg-blue text-black'">
{{ props.row.processed }}
</q-badge>
</q-td>
Codepen - https://codepen.io/Pratik__007/pen/PoqzzLx?editable=true&editors=101
Related
I am trying to write a recursive Jekyll navigation template (include) as described in "Nested tree navigation with recursion". I have a minimal example committed in jekyll-min, which basically has:
two top-level dirs, each with one page
another dir under the second top-level dir, containing one page
a navigation template (_includes/docs_contents.html) that loops through the top-level dirs and initiates recursive traversal for each
a recursive include (_includes/nav.html) that accepts a navigation entry, renders its title and child links, and invokes itself recursively for any dirs in its children list
a layout (_layouts/doc.html) that renders the navigation pane and content for each page
I'm using Ruby v2.7.0 and Jekyll v3.8.5.
# docs structure
_docs
|
|_a/
| |_index.md
|
|_b/
|_index.md
|
|_1/
|_index.md
# _data/docs-nav.yml
- title: a
docs:
- link: /a/
- title: b
docs:
- link: /b/
- title: 1
docs:
- link: /b/1/
# _includes/nav.html
{% assign section=include.nav %}
<div class="ui accordion">
<div class="title active">
<i class="dropdown icon"></i>
{{ section.title }}
</div>
<div class="content active">
<div class="ui vertical text menu">
{% for item in section.docs %}
{% if item.link %}
{%- assign p = site.documents | where: "url", item.link | first %}
<a {%- if page.url== p.url %} class="current item" {% endif %} class="item" href="{{ p.url }}">
{{ p.menu_name | default: p.title }}
</a>
{% endif %}
{% if item.docs %}
{% include nav.html nav=item %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
# _includes/docs_contents.html
<div class="unit one-fifth hide-on-mobiles">
<aside>
{% for section in site.data.docs_nav %}
{% include nav.html nav=section %}
{% endfor %}
</aside>
</div>
# _layouts/doc.html
---
title: Docs
description: version 1.0
---
<html>
<body>
{% include docs_contents.html %}
{{ content }}
</body>
</html>
As far as I understand, for each page the navigation template render should work like this:
_layouts/doc.html
_includes/docs_contents.html: iterate root level entries, calling _nav for each
_nav(/a/ entry): render title, iterate docs, render /a/ link, and quit
_nav(/b/ entry): render title, iterate docs, render /b/ link, and then call _nav(/b/1/ entry)
_nav(/b/1/ entry): render title, iterate docs, render /b/1/ link, and quit
_nav(/b/ entry) (already in stack): quit
_includes/docs_contents.html: quit
However, when I perform a bundle exec jekyll build I get:
Liquid Exception: Liquid error (/mnt/e/ThirdParty/jekyll-min/_includes/docs_contents.html line 17):
Nesting too deep included in /_layouts/doc.html
jekyll 3.8.5 | Error: Liquid error (/mnt/e/ThirdParty/jekyll-min/_includes/docs_contents.html line 17):
Nesting too deep included
Traceback (most recent call last):
[...]
What is the problem with my content or the recursive template? I have been struggling with this for hours with no luck.
JEKYLL_LOG_LEVEL=debug
didn't produce any additional useful info.
The actual document structure is more complex and could go arbitrarily deep, so writing a non-recursive template to manually handle nested levels may not be an option.
Excellent question.
With help of {{ myvar | inspect }} and a flag limiting recursion, I've successfully debugged your code and understood why this infinite recursion occurs.
It comes from the fact that the section variable in docs_contents.html is assigned by in a for loop and freezed : it cannot be changed.
The first time you include nav.html, {% assign section=include.nav %} is not changing section and your code just use the one assigned in your for loop.
When you recurse and call nav.html a second time it will use the same freezed global section variable and recurse indefinitely.
The solution is to change your variable name in nav.html from section to something else. eg: sub_section, and it will work, because this new variable will not be freezed and can be reassigned as needed during recursion.
{% assign sub_section=include.nav %}
{{ sub_section.title }}
{% for item in sub_section.docs %}
...
If you want to experiment here is my test code with some comments :
docs_contents.html
{% for section in site.data.docs_nav %}
{% comment %} ++++ Try to reassign "section" ++++ {% endcomment %}
{% assign section = "yolo from docs_contents.html" %}
{% assign recursion = 0 %}
<pre>
>> docs_contents.html
++++ "recursion" var is assigned and becomes global
recursion : {{ recursion | inspect }}
++++ "section" is freezed to loop value ++++
including nav with include nav.html nav=section >> {{ section | inspect }}
</pre>
{% include nav.html nav=section %}
{% endfor %}
nav.html
{% comment %} ++++ Try to reassign "section" ++++ {% endcomment %}
{% assign section = "yolo from nav.html" %}
<pre>
>> nav.hml
recursion : {{ recursion }}
include.nav : {{ include.nav | inspect }}
++++ "section" is freezed to loop value ++++
section : {{ section | inspect }}
</pre>
{% comment %} ++++ useless assignement ++++ {% endcomment %}
{% assign section=include.nav %}
{% for item in section.docs %}
{% if item.link %}
{%- assign p = site.documents | where: "url", item.link | first %}
<a {%- if page.url== p.url %} class="current item" {% endif %} class="item" href="{{ p.url }}">
{{ p.menu_name | default: p.title }}
</a>
{% endif %}
{% comment %}++++ limiting recursion to 2 levels ++++{% endcomment %}
{% if item.docs and recursion < 2 %}
{% comment %}++++ incrementing "recursion" global variable ++++{% endcomment %}
{% assign recursion = recursion | plus: 1 %}
{% include nav.html nav=item %}
{% endif %}
{% endfor %}
I have a Ionic-1 app in which there's a large list that displays images (I use collection-repeat for this).
For now, I ship the images with the app. But the list evolves with time so my app gets the list from a server, then checks if there are new items, and use remote urls for new images.
The list is getting bigger (more tha 300 items), so managing this is quite heavy on the app. Moreover, shipping the images with the app is going to become impossible, because the .apk or .ipa are getting too big.
So I would like to use a better way to manage my images and also a better way to display them dynamically.
Is that possible to call the server images in my collection-repeat and to make it smooth and performant? Is that possible, that once an image has been called, it's saved in the local memory (maybe localStorage) so that the next time the list displayed it's faster ? If yes, how to do this ?
Is that the best way to manage a dynamical list? I would like to hear the best practice for this, for the best UX.
Here's my bit of code:
<div class="boardselection firstScreen" ng-if="transitionFinished">
<ion-item collection-repeat="item in prodataSelect | orderBy:data.sort | filter: data.selectBrand.brand:true | filter: data.selectName.name | filter: generalSearchFunc | filterObj:['brand','modelStrict']" item-width="25%" item-height="35%" item-render-buffer="16">
<a class="optionfuninit item-content" data-proid="{{item.id}}" on-tap="whatToDo(item.id,$event);" ng-class="item.fun == '0' ? 'aNormal' :( item.fun == '1' ? 'aSmallWave' : (item.fun == '2' ? 'aStepUp' : ''))">
<div class="listviewTrophy" ng-if="isWinning(item.id)">
<i class="icon ion-trophy"></i>
</div>
<i class="icon ion-female" ng-show="item.gender == 'female'"></i>
<!-- <p class="flex-caption" fittext fittext-min="10" fittext-max="15" ng-bind="item.modelStrict" >
{{item.modelStrict}}
</p> -->
<div class="listviewtexts flex-caption" ng-class="item.fun == '0' ? 'aNormal' :( item.fun == '1' ? 'aSmallWave' : (item.fun == '2' ? 'aStepUp' : ''))">
<span class="listviewtextsmodel">{{item.modelStrict}}</span>
</div>
<div class="imagebox">
<img class="imageoptionsmodel " ng-src="{{imagesUrls[item.imageName]}}"/>
</div>
</a>
</ion-item>
you can use ionic-cache-src (https://github.com/BenBBear/ionic-cache-src)
it will work like :
or
you can use $ImageCacheFactory to save it in cache,
docs here.
I want to get text "+12345" from this HTML
<p class="Test" ng-repeat="(k, wl) in partnerEditModel.td">
<span id="Test-update-12345" class="ng-binding">
+12345
<span class="err-message ng-binding">Error</span>
</span>
<a id="mibile" class="button" ng-click="remove(k)">
</p>
I have written "//p[#class='Test']/span but it matched "+12345Error" which I have just wanted "+12345" (I have not wanted "Error".)
Could you please tell me about how to write this xpath?
Try below XPath expression to get "+12345" only:
normalize-space(//span[#id="Test-update-12345"]/text()[1])
Try below code in robot framework
${var}= | Get Text | xpath=//span[span[#class='err-message ng-binding']]
Log | ${var}
Try using below:
xpath=//p[#class='Test']/span[1]
How print value in this code:
<li class="price-val">{{ $value->price ? '$value->price month<span class="price-fea-ct">*VAT Included</span>':'$value->price month' }}</li>
$value->price variable is have 0 & 9 value respectively.but it does print value.print $value->price just.
Something like this should work
<li class="price-val">
#if ($value->price)
{{{ $value->price }}} month<span class="price-fea-ct">*VAT Included</span>
#else
{{{ $value->price }}} month
#endif
</li>
However for me the condition doesn't make sense - if price is 0 you will display 0 / month and it does not seem to be logical
You have syntax errors, try this:
<li class="price-val">
{{
$value->price ?
$value->price . ' month <span class="price-fea-ct">*VAT Included</span>' :
$value->price . ' month'
}}
</li>
I'm trying to create my first Jekyll website and I'm encountering a problem designing the i18n part.
The different articles will be totally rewritten for each language, so each one will be a different post, no problems here. I actually have more difficulties with the text in my layout / includes.
Typically, for the menu, I was thinking doing something along these lines:
{% capture menu_location %}menu.{{ lang }}.html{% endcapture %}
{% include menu_location %}
like suggested here. But this gives me the following error :
Included file 'menu_location' not
found in _includes directory
Is it possible to use a variable for the include tag ? Do you have any other idea how I can do this ?
Thanks !
PS: Even if I have only 3 languages in mind for the moment, I won't do it with an if / elseif / else syntax ;)
What you are trying to do isn't possible without modifying Jekyll. The include filter they defined treats its parameter as a string, not as an expression.
I've created a couple bilingual sites with Jekyll in the past. I found that the cleanest solution was often storing locale-dependant variables inside _config.yml, and reference it when needed.
# _config.yml
...
locales:
en:
welcome_message: "Welcome to my site"
...
es:
welcome_message: "Bienvenido a mi sitio"
For every page I render, I need to know its locale. The simplest way of doing that is adding a locale field on the top yaml that page:
---
# a page or post (for example index.html)
...
locale: en
---
You can then get the current page locale by doing page.locale.
If you have divided your site in folders (/en/ for english, /es/ for spanish, and so on, you can use the page url to calculate the locale, so that you don't need to specify the locale on each page:
{% capture locale %}{{ page.url | truncate: 3, "" | remove: "/" }}{% endcapture %}
{% if locale == "" %}{% assign locale = "en" %}{% endif %}
For a page like /en/blog/, locale will be 'en'; for /fr/le-blog, it will be 'fr'. You will have to use that line in all the layouts and includes that need to use the locale, though.
You can then get localized texts like this:
{{ site.locales[locale].welcome_message }}
Or, if you prefer page.locale:
{{ site.locales[page.locale].welcome_message }}
Menus are the same; you can generate them from _config.yml, too:
# _config.yml
...
locales:
en:
nav:
- text: Welcome
url: /en/welcome
- text: Blog
url: /en/blog
layout: post
...
es:
nav:
- text: Bienvenido
url: /es/bienvenido
- text: Blog
url: /es/blog
layout: post
...
Then you can have a single menu.html that generates the right menu depending on the page locale:
{% capture locale %}{{ page.url | truncate: 3, "" | remove: "/" }}{% endcapture %}
{% if locale == "" %}{% assign locale = "en" %}{% endif %}
<nav>
<ul class="nav">
{% for link in site.locales[locale].nav %}
{% assign current = nil %}
{% if page.url == link.url or page.layout == link.layout %}
{% assign current = 'current' %}
{% endif %}
<li class="{% if forloop.first %}first{% endif %} {{ current }} {% if forloop.last %}last{% endif %}">
<a class="{{ current }}" href="{{ link.url }}">{{ link.text }}</a>
</li>
{% endfor %}
</ul>
</nav>
For using ´page.locale´ instead of ´locale´, just remove the first two lines and replace site.locales[locale].nav by site.locales[page.locale].nav
I hope this helps.
Regards!
How about creating a filter, wouldn't it be simpler? Something like:
<li>{{some_text_id|localize</li>