I am just starting off with angular, but basically I want to render one set of templates with ng repeat:
<ion-item ng-repeat="item in items" ng-click="loadSingle(item)">
Hello, {{item.name}}!
</ion-item>
and then later I want to render the object in a different template if someone clicks on it:
<div>
<h1>{{ item.name }}</h1>
<h2>{{ item.detail }}</h2>
</div>
How do I do this? With jQuery/underscore I would just have the separate template loaded and feed it the json object (item) but I can't seem to find any documentation on how to do the templating without the ng-repeat. I'm a little confused. Thanks!
I would define loadSingle() as a method that would put the specific item onto the scope. Then I would define another section in the HTML to display the selected item.
JavaScript
app.controller('ctrl', function($scope){
$scope.loadSingle = function(item){
$scope.selectedItem = item;
}
});
HTML
<div ng-show="selectedItem">
<h1>{{ selectedItem.name }}</h1>
<h2>{{ selectedItem.detail }}</h2>
</div>
Related
I want to create a list of modal popups with a for-loop, each of them displaying different text.
The site is created with Jekyll with the Liquid templating engine.
In particular, I want to create the list of my scientific publications, for each of them with 2 icons: one for the bibtex entry and one for the abstract. This information is stored in a yaml file.
I m following this simple tutorial for modal popups.
The popups work, but the text is the same for all the entries. How is possible to generate independent modal popups?
This is the html
{% for papers in papers %}
{% for content in paper.papers %}
<a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#modal"></i></a>
<div class="modal" id="modal">
<div class="modal-header">
<div class="title">{{content.name}}</div>
<button data-close-button class="close-button">×</button>
</div>
<!-- text to display -->
<div class="modal-body">{{content.text}}</div>
</div>
{% endfor %}
{% endfor %}
and this is the Javascript code:
const openModalIcons = document.querySelectorAll('[data-modal-target]')
const closeModalButtons = document.querySelectorAll('[data-close-button]')
const overlay = document.getElementById('overlay')
openModalIcons.forEach(icon => {
icon.addEventListener('click', () => {
const modal = document.querySelector(icon.dataset.modalTarget)
openModal(modal)
})
})
function openModal(modal) {
if (modal == null) return
modal.classList.add('active')
overlay.classList.add('active')
}
closeModalButtons.forEach(button => {
button.addEventListener('click', () => {
const modal = button.closest('.modal')
closeModal(modal)
})
})
function closeModal(modal) {
if (modal == null) return
modal.classList.remove('active')
overlay.classList.remove('active')
}
overlay.addEventListener('click', () => {
const modals = document.querySelectorAll('.modal.active')
modals.forEach(modal => {
closeModal(modal)
})
})
The problem is that all your modals have id="modal", so the selector #modal is probably always selecting the first one. The id attribute should be unique in the entire document.
Something like this should work:
{% for papers in papers %}
{% for content in paper.papers %}
<a title="{{content.name}}"><i class='{{content.icon}}' data-modal-target="#paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}"></i></a>
<div class="modal" id="paperModal{{forloop.parentloop.counter}}_{{forloop.counter}}">
<div class="modal-header">
<div class="title">{{content.name}}</div>
<button data-close-button class="close-button">×</button>
</div>
<!-- text to display -->
<div class="modal-body">{{content.text}}</div>
</div>
{% endfor %}
{% endfor %}
Instead of the for loop counter, you could also use the paper name as the ID (as long as it's unique), e.g. id="paperModal_{{content.name | slugify}}".
Edit: Edited the snippet to use forloop.counter and account for the nested for loop.
i have an ionic 4 with angular app, im also implemented websocket in my componentA.
componentA.html:
<div *ngFor="let item of myList">
<div>{{ item.name }}</div>
<div>{{ calcPrice(item.price) }}</div>
<div>{{ calcDistance(item.distance) }}</div>
<div>{{ calcAge(item.age) }}</div>
<div>{{ setColor(item.color,item.name) }}</div>
</div>
here a sample of myList:
[
{...},
{...},
{...},
{...},
...
]
myList is an array and normaly contain 20 items, those items is updated with my websocket. I faceing a big performance issue when i enter the page, my app completely freeze when my list passes aproximately 8 items, so a started do to a big research and i discovery that using functions on view is a bad pratice
articles: here and here
Every function that i uses have a return and I need those function do make calculations and etc, putting this inside html will make the code dirty and hard to maintein.
what i shoud do to make this work propertly? should i use pipes for each item?
Edit:
here is one of the functions that i used in my html
calcVolum(item) {
if (
TestClass.startsWithA(item.name) &&
!this.needHelp(item.name)
) {
return (
Number(item.price.replace(this.regexPts, '')) *
Number(item.currentQuantity) *
item.age
);
} else if (this.needHelp(item.name)) {
return (
Number(item.price.replace(this.regexPts, '')) *
Number(item.currentQuantity) *
item.dolptax *
item.age
);
}
return (
Number(item.price.replace(this.regexR$, '').replace(',', '.')) *
item.currentQuantity
);
}
you set up your component so that things are run when they need to be run.
write a function like:
calculateItemValues(items) {
return items.map(i => {
return Object.assign({}, i,
{
priceCalc: this.calcPrice(i.price);
// however many else you need
}
);
});
}
call that whenever you need to (when the items change), maybe like this.calcItems = this.calculateItemValues(this.items) or inside an rxjs map statement is usually a great place, and iterate the calculated:
<div *ngFor="let item of calcItems">
<div>{{ item.name }}</div>
<div>{{ item.priceCalc }}</div>
<!-- whatever else you set -->
</div>
I have this object:
this.item = {
name:"Michael",
age:18
};
I want to put on HTML
name: Michael
age: 18
<div >{{ item (name) }}</div> --??? should put name
<div>{{ item.name }}</div>
<div ">{{item (age)}}</div> --?? should put age
<div>{{ item.age}}</div>
How can I get the string name and age from the object?
Use keyValue pipe
<div *ngFor="let item of item | keyvalue">
{{item.key}}:{{item.value}}
</div>
stackblitz
You should avoid calling a function (which some suggest in comments) inside template. If you do that, that function will be called every time change detection runs. Which is bad. Almost always prefer pipes over method call inside the template.
You can try something like:
<div *ngFor="let key of item">
<div>{{key}}: {{item[key]}}</div>
</div>
Method render does not exist error also in links() method
this is my blade
blade.php
this is my controller
controller.php
render() isn't used for pagination anymore.
In Laravel 5.4 you use links() to display the links:
<div class="container">
#foreach ($news as $newsItem)
{{ $newsItem->whatever }}
#endforeach
</div>
{{ $news->links() }}
Displaying Pagination Results
When calling the paginate method, you will receive an instance of Illuminate\Pagination\LengthAwarePaginator. When calling the simplePaginate method, you will receive an instance of Illuminate\Pagination\Paginator. These objects provide several methods that describe the result set. In addition to these helpers methods, the paginator instances are iterators and may be looped as an array. So, once you have retrieved the results, you may display the results and render the page links using Blade:
<div class="container">
#foreach ($news as $newsItem)
{{ $newsItem->whatever }}
#endforeach
</div>
{{ $news->links() }}
See more about Laravel 5.4 pagination here
Here is my html code:
<div ng-repeat="(key, a) in items" data-id="{{ Id }}" class="item" id="{{Key}}" ng-click="item($event, key)">
<div class="bubble></div>
<p>
<span> {{ description }}</span>
</p>
</div>
This is the list of items. When we click on the item in the list - all previous elements are set as active (add class).
Here is how it's done:
$scope.item = function(event, key) {
var current;
if ( $(event.target).hasClass('bubble')){
current = $(event.target).closest('#'+ Key);
changeItem(current);
}
function changeItem(current){
$(current).addClass('active');
$(current).prevAll().addClass('active');
$(current).nextAll().removeClass('active');
}
};
Is it possible to use ng-model or something else to set the active value by default form json file? Mean, in json - we have item 3 - marked as active, so how could I add this value to the $scope.item as current? or probably use ng-model?
I have not tried it, but something like this should work.Assuming that the class has to be applied to ng-repeat div. Change your ng-repeat div to:
<div ng-repeat="(key, a) in items" data-id="{{ Id }}" class="item" id="{{Key}}" ng-click="markSelected($index)" ng-class="{'active':selectedIndex<$index}">
</div>
The ng-click call a method markSelected($index) on the controller that sets the currently selected item index. The ng-class uses the current index ($index) and the selectedIndex to determine what class to apply.
The final task is to implement the function which looks like:
$scope.markSelected=function(index) {
$scope.selectedIndex=index;
}
You should stop using jquery and start to think in a more angular way.
There is a directive ng-class that is used to add or remove classes
You can find more information here : https://docs.angularjs.org/api/ng/directive/ngClass
<div ng-repeat="(key, a) in items" data-id="{{ Id }}" class="item" id="{{Key}}" ng-click="item(key)">
<div ng-class="{active : a.active, inactive : a.inactive}"></div>
<p>
<span> {{ description }}</span>
</p>
</div>
$scope.item = function(key){
$scope.items[key].active = true;
$scope.items[key].inactive = false;
}