I've got a *ngFor where I fetch a heroes list.
Now, If I change a value of hero, my heroes should be changed too, how do you do it, the best way...
<li *ngFor="#hero of heroes">
<input type="text" [value]="hero.name"/>
</li>
I only know the way to make a (change)="UpdateListByItem(item)" , to call a methode, but isn't there a way to make a two way databind for all items?
You can do two way databinding using ngModel directive
<li *ngFor="#hero of heroes">
<input type="text" [(ngModel)]="hero.name"/>
</li>
Whenever you change the input text the corresponding hero name will get changed.
More information can be found here https://angular.io/docs/ts/latest/guide/forms.html
You could use ngModel to do this automatically
<li *ngFor="#hero of heroes">
<input type="text" [(ngModel)]="hero.name"/>
</li>
Look at this Answer.
ngModel allows to change individual name and update the list immediately.
<ul>
<li *ngFor="#hero of heros">
<input type="type" [value]="hero.name" [(ngModel)]="hero.name" />
</li>
</ul>
Related
I am using the "Multiple Select Component" currently from JQuery. I just found out there is a Vue Version, but it adds a dependency to Jquery I do not like.
https://multiple-select.wenzhixin.net.cn/docs/en/introduction
Is there a native way to do this using VueJS 3.0 or any better replacement?
This is what I am going to achieve:
Yes, you can either create a new component for the dropdown/checkboxes or use a similar component from Vuetify: https://vuetifyjs.com/en/components/selects/#menu-props
For the new component, you could use somethig like this:
<div class="select">
<ul>
<li v-for="(option, index) in options" :key="index">
<input type="checkbox" :id="index" :value="option.value" v-model="selected">
<label :for="index">{{ option.anything }}</label>
</li>
</ul>
</div>
Here's the codepen, I do not own the code.
https://codepen.io/huleos/pen/xQaYdK
I'm trying to create a list with checkboxes for collecting actions with materialize, but the input tag didn't get recognized by the pattern. Is this possible?
<div class="row">
<ul class="collection with-header" v-if="listaRoles.length > 0">
<li class="collection-header left-align"><h4> Roles do perfil {{ perfil.descricao }}</h4></li>
<li v-for="r in listaRoles" :key="r.id" class="collection-item">
<div class="left-align">
<span> {{ r.descricao }} </span>
<input type="checkbox" />
</div>
</li>
</ul>
</div>
You have to use the exact same structure as the materialize docs, otherwise your components won't work correctly. So in the case of checkboxes that is <input>, followed by <span>, and both of these wrapped in a <label>.
<label>
<input type="checkbox" />
<span>Red</span>
</label>
Any deviation from this will break the component.
EDIT:
Checkboxes inside li works perfectly fine, here a codepen to demonstrate:
https://codepen.io/doughballs/pen/KKpNrPy
The error is coming from somewhere else.
https://materializecss.com/checkboxes.html
I want to capture all click events on the menu of my page.
I've setup a tag that will capture all click events on my page. It works with the trigger setup to "Click - All elements".
When I set up the trigger to specifically register only the clicks on elements of the menu var, nothing is detected. So, definetly, I'm doing somenthing wrong within the trigger.
EDIT 1:
this is the web page: www.chazki.com
Menu code:
<div class="collapse navbar-collapse" id="navbar-ex-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">
<a class="new_service">Solicita un Chazki</a>
</li>
<li>
Faq
</li>
<li>
<p class="new_service new-service" style=" padding: 6px;"><a>Login</a></p>
</li>
<li>
<a class="btn btn-default btn-lg location_ac"><i class="fa fa-fw fa-spin fa-star"></i>Lima</a>
</li>
</ul>
<form>
<fieldset class="navbar-form navbar-left">
<input type="text" name="track-code" id="track-code" class="form-control" placeholder="Código de tracking?">
<button id="track-find-button" class="btn btn-default" type="button">Buscar</button>
</fieldset>
</form>
</div>
Try 1 on trigger:
Element ID: It's supposed to limit the clicks registered for only the div containing the menu.
I get this error in debugging mode:
Try 2 on trigger:
on Click ID.
Click ID error:
#
I could also use the ul tag for the trigger, as it is the only unordered list on the page.
Any hint is welcome. Thanks!
Basically I needed to understand the different variables in GTM. I've found Simo Ahava web very helpful in this regard.
https://www.simoahava.com/analytics/variable-guide-google-tag-manager/
Thanks to Simo, I also understood the benefits of usen "Match CSS Selector" option.
So my configuration ended like this:
Using:
Click All Elements.
This trigger fires on "Some Clicks".
"Click Element" -> "Matches CSS Selector" -> "#navbar-ex-collapse ul li a, #navbar-ex-collapse ul li p"
As I have li and a html elements, I needed to use 2 CSS selectors, separated by a comma.
Ok I saw many posts on how to serialize the value of dragged items to get hash and they tell how to save them. Now the question is how do I persist the dragged items the next time when user log's in using the has value that I got
eg:
<ul class="list">
<li id="id_1">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_2">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_3">
<div class="item ui-corner-all ui-widget ui-widget-content">
</div>
</li>
<li id="id_4">
<div class="item ui-corner-all ui-widget">
</div>
</li>
</ul>
which on serialize will give
"id[]=1&id[]=2&id[]=3&id[]=4"
Now think that I saved it to Sql server database in a single field called SortOrder.
Now how do I get the items to these order again ?
the code to make these sort is below, without which people didn't know which library I had used to sort and serialize
<script type="text/javascript">
$(document).ready(function() {
$(".list li").css("cursor", "move");
$(".list").sortable();
});
</script>
There are a few options. One option is to do the sorting server-side. You would read out that string in .NET to generate the list, in order, on the fly. Then output it to the browser.
Another option would be output the serialized string as a string variable in javascript. You could then use jQuery to reorder the elements. The problem with this method is that there would probably be a flash where the unordered list would display and then the correctly ordered list would appear.
I have ASP.Net code similar to the following (this is inside a FIELDSET):
<ol>
<li>
<label>Some label</label>
<one or more form controls, ASP.Net controls, labels, etc.>
</li>
<li>
<label>Another label</label>
<... more of the same...>
</li>
...
</ol>
I'm trying to keep my markup as clean as I possibly can, but I've decided that for various reasons, I need to wrap a DIV around everything in the list item after the first label, like this:
<ol>
<li>
<label>Some label</label>
<div class="GroupThese">
<one or more form controls, ASP.Net controls, labels, etc.>
</div>
</li>
<li>
<label>Another label</label>
<div class="GroupThese">
<... more of the same...>
</div>
</li>
...
</ol>
I would rather do this with "unobtrusive Javascript" via jQuery instead of littering my page with extra markup so I can keep the form semantically "clean".
I know how to write a jQuery selector to get to the first label in each list item $("li+label") or use :first-child. I also know how to insert things after the selection.
What I can't figure out (at least this late at night) is how to find everything after the first label in the list item (or basically everything in the list item except for the first label would be another way to put it) and wrap a DIV around that in the document ready function.
UPDATE:
Owen's code worked once I removed the single quotes from around: $('this') and set the proper decendent selector: $("li label:first-child") in order to only select the first label that occurs after a list item.
Here is what I did:
$(document).ready(function() {
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="GroupThese"></div>');
});
});
edit: corrected code (see old code in revision history and comments for more info)
ok this should work:
$('li label:first-child').each(function() {
$(this).siblings().wrapAll('<div class="li-non-label-child-wrapper">');
});
from:
<li>
<label>Some label</label>
<div>stuff</div>
<div>other stuff</div>
</li>
<li>
<label>Another label</label>
<div>stuff3</div>
</li>
produces:
<li>
<label>Some label</label>
<div class="li-non-label-child-wrapper">
<div>stuff</div>
<div>other stuff</div>
</div>
</li>
<li>
<label>Another label</label>
<div class="li-non-label-child-wrapper">
<div>stuff3</div>
</div>
</li>
One approach would be to just wrap everything inside the <li> and then move the label out, e.g.
var $div = $('li').wrapInner('<div></div>').children('div');
$div.children('label').prependTo($div.parent());