i have a piece of html code that in charge of presenting a list based on certain conditions:
<!-- Show list only if there are more than 5 results -->
<div list.numberOfResults > 10">
<b>Name: </b>{{list.name}} <b>ID: </b>{{list.id}}
<b>Country: </b>{{list.country}}
</div>
<!-- Show list only if there are less than 10 results -->
<div list.numberOfResults < 10">
<b>Name: </b>{{list.name}} <b>ID: </b>{{list.id}}
<b>Country: </b>{{list.country}}
</div>
Now, I also have some optional parameter (list.country) so I need to check if its not empty before as well.
I believe there is a way to take this logic outside of this html file and make a file that is responsable of the logic and the html will present the data accordingly, can someone please share a simple example of how this can be done based on my code?
thanks!!
Since There are two component you can keep them in a separate file like name
component.html
Then you can import in index.html like
<link rel="import" href="component.html" >
Or you can just grab specific portion from the file like
...
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
// Grab DOM from component.html's document.
var el = content.querySelector('.component');
document.body.appendChild(el.cloneNode(true));
</script>
</body>
DEMO :https://plnkr.co/edit/6atoS1WOK5RzKSmNeR8n?p=preview
You can use ngSwitch when you want to show HTML pieces conditionally,
#Component({
selector: 'my-app',
template: `
<div [ngSwitch]="list.numberOfResults>10"> // here
<div *ngSwitchCase ="true"> // here
<b> Template1 </b><br>
<b>Name: </b>{{list.name}} <br>
<b>ID: </b>{{list.id}} <br>
<b>Country: </b>{{list.country}}
</div>
<div *ngSwitchCase ="false"> // here
<b> Template2 </b><br>
<b>Name: </b>{{list.name}} <br>
<b>ID: </b>{{list.id}} <br>
<b>Country: </b>{{list.country}}
</div>
<div>
`,
})
export class App {
list={numberOfResults:2,name:'myList',id:1,country:'USA'};
}
Related
I have created a web component and used in two different places as follows.
<div class="sub_container">
<label>Users in Debt</label>
<input placeholder="Search by user name" class="input_style">
<my-component filter="userdebt"></my-component>
</div>
<div class="sub_container">
<label>Debts</label>
<input placeholder="Search by debt description" class="input_style">
<my-component filter="debt"></my-component>
</div>
</div>
As you can see i have used <my-component filter="userdebt"></my-component> in 2 places.
Here i'll show my web component
connectedCallback() {
console.log("ABC");
window.globalVar = this.getAttribute("filter");
this.innerHTML = `
<html>
<body>
<div id="templates">
<template id="book-template">
<li><span class="title"></span> — <span class="author"></span></li>
</template>
<ul id="books"></ul>
</div>
<script type="module" src="./js/testingjs.js"></script>
</body>
</html>
`;
var yourElement = document.getElementById('templates');
yourElement.id = globalVar;
console.log("MyComp ", yourElement.id);
}
customElements.define('my-component', MyComponent);
But even though i have used my-component twice in the html i can see the console.log only once meaning it's executing only once. What can be the reason for this?
A Javascript ES6 module is only loaded the first time it's needed.
Therefore its content is only executed once (when it is loaded).
You should call explicitly a function defined in the Javascript module in connectedCallback() method if you want it to be exectuted for each custom element created.
In my website, on UI I show information from DB, use "spring". I want to make, if items quantity equals 0, then I hide this "div". If items quantity more than 0, then I show "div"
In html I recive from spring:
<div th:each="viewAvailableWhisky : ${viewAvailableWhisky}">
<div class="tilt pic" id="ShowHide">
<a th:href="#{~/buySelectedWhisky(nameBuyWhiskey=${viewAvailableWhisky.id})}" >
<img th:attr="src=${viewAvailableWhisky.photo}" id="photoId" width="150" height="250"/>
<div>
<b> <span th:text="${viewAvailableWhisky.nameWhisky}">Name</span></b>
</div>
<div>
<b> Quantity: <span th:text="${viewAvailableWhisky.quantityWhisky}"
>quantityWhisky</span>piece</b>
<input type="hidden" id="quantity" th:value="${viewAvailableWhisky.quantityWhisky}"/>
</div>
<div>
<b> $ <span th:text="${viewAvailableWhisky.price}">Price</span></b>
</div>
</a>
</div>
</div>
I think, it's better to make the with use a JS. But I don't understand how, I try use this code. This code can't catch
quantity of goods of each item from a DB
$(document).ready ( function(){
var quantityItems = $("#quantity").val();
console.log(quantityItems);
if(quantityItems>0){
$("#ShowHide").show();
}
else {
$("#ShowHide").hide();
}
});
The th:if="${condition}" attribute is used to display a section of the view if the condition is met.
<span th:if="${student.gender} == 'M'" th:text="Male" />
Furthemore, thymeleaf offers option to display certain section if given condition is NOT met using th:unless
<span th:unless="${student.gender} == 'M'" th:text="Female" />
(For further info see This tutorial or this intro to Thymeleaf conditionals)
To display certain content only if user has specific role, use spring security's integration with thymeleaf.
<div sec:authorize="hasRole('ROLE_ADMIN')">
This content is only shown to administrators.
</div>
More info about Spring Security integration here.
a button corresponding to a prompt box,each box is different shells;Although implements the desired function, but my code is too complicated, and that there is no simple way. how can I do? This is my code
<--html button-->
button1
button2
...
button100
<--html pop box-->
<div class="note1" style="display:none;">
<img class="title-css" src="note1.png">
<p class="one">note1</p>
</div>
...
<div class="note100" style="display:none;">
<img class="title-css" src="note100.png">
<p class="one">note100</p>
</div>
<--angular js-->
$scope.showRulePop = function(index) {
for(var i=1;i<=8;i++) {
$('.note'+i).hide();
}
$('.note'+index).show();
};
Well first of all, don't use jQuery, unless your in the directive level of angular jQuery have nothing to do there.
First let's get rid of the links part using a simple ng-repeat :
<--html button-->
<div ng-repeat="button in buttons">
{{button.label[i]}}
</div>
// JS in the controller
$scope.buttons = [{
label:'button1'
},{label:'button2'}];
As you can see i declare in the javascript all your buttons and i just loop over it.
Now the "bombox" or whatever it is let's make it a simple template :
<div class="{{currentnote.class}}" ng-if="currentNote">
<img class="title-css" src="{{currentNote.img}}">
<p class="one">{{currentNote.content}}</p>
</div>
// and use ng-repeat for the eight first when there is no button selected
<!-- show 1 to 8 if note current note selected -->
<div ng-repeat="button in buttons1To8" ng-if="!currentNote">
<div class="{{button.note.class}}">
<img class="title-css" src="{{button.note.img}}">
<p class="one">{{button.note.content}}</p>
</div>
</div>
// JS
$scope.buttons = [{
label:'button1'
note:{class:'note1', img:'note1.png', content:'note1'//assuming no HTML or you' ll need something more
}},{label:'button2', note:{...}}, ...];
$scope.showRulePop = function(index){
$scope.currentNote = $scope.buttons[index].note;
}
$scope.buttons1To8 = $scope.buttons.slice(0, 8);//0 to 7 in fact
That's all, no need of jQuery.
I am totally new to ember so please be nice :)
I have an Ember app where i want to redirect to a specific slug taken from an textfield input. In my .hbs i have the following code:
<div class="liquid-container">
<div class="liquid-child">
<div class="desktop-layout-scroll-container">
<div class="overlay-info-layout">
<div class="overlay-info-layout-content">
<h1 class="expired-overlay-status">{{t 'code.title'}}</h1>
<h2 class="expired-overlay-explanation">
{{t 'code.description'}}<br>
</h2>
<div class="row">
<div class="col-xs-offset-3 col-xs-6">
<input name="txtSlug" type="text" id="txtSlug" class="field" />
<input type="submit" name="btnGo" value="" id="btnGo" class="btn" onclick="javascript:SubmitForm()" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function SubmitForm(){
var Slugtxt = document.getElementById("txtSlug").value;
window.location = "http://www.google.com/" + Slugtxt;
}
</script>
You should never embed JavaScript in an Ember .hbs file. This code should really go in your controller for this class. First, generate your controller:
ember g controller <name_of_route>
Then inside your controller, you want to define two things. The slugtxt variable, and the redirecting as an action. That would look something like this:
import Ember from 'ember';
export default Ember.Controller.extend({
slugtxt: '',
actions: {
redirect() {
window.location = "http://www.google.com/" + this.get('slugtxt');
}
}
}
Then, back in your template, you would want to change your input to be mapped to the slugtxt variable from your controller, and set the action of the button to the redirect action that you defined in your controller. That would look something like this:
{{input value=slugtxt}}
<button {{action "redirect"}}>Submit</button>
No need to worry about using the <input> tag, you generally wont be using form data with ember.
is it possible and how would one begin the process of what I am trying to do. I have managed to create this:
example2.html
<head>
<title> test2 </title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<h2> Section Two </h2>
<div ng-app="" ng-controller="ModuleTwoController">
<p><input type="text" ng-model="test"></p>
<ul>
<li ng-repeat="x in filtered = (countries | filter:test)">
{{ x.country }}
</li>
</ul>
<p> Items in list: {{filtered.length}} </p>
</div>
<script src="mod2.js"></script>
</script>
</body>
</html>
mod2.js
function ModuleTwoController($scope){
$scope.countries = [{country:'Argentina'},
{country:'USA'},
{country:'Brazil'},
{country:'Hong Kong'},
{country:'UK'},
{country:'Turkey'},
{country:'Rwanda'},
{country:'Federated States of Micronesia'},
{country:'India'},
{country:'South Africa'}
];
}
so far this filters down when i type in one of the countries. if i type in an 's' only the ones with s in the name are returned. i want my if statement to say 'if list size = 1' then display countries flag. if list size >1 display nothing.
is there a way to do this in html/js/css and is there a good if function within angular?
Sure, just check the length property:
<p>
Items in list: {{filtered.length}}
<span ng-if="filtered.length === 1">FLAG CODE HERE</span>
</p>
You can use the following:
<span ng-if="filtered.length == 1">
Show Flag
</span>