I'm making a project in angular. When i click on the checkbox i want that there is a line trough the text. But when i click on the checkbox nothing happens ..
Can you help me ?
Thanks !
<h3>Todos list</h3>
<ul class="list-group">
<li *ngFor="let todo of todos; let i = index" class="list-group-item">
{{todo.text}}
<p [ngClass]="{strike: deleted}">test</p>
<label>
<input type="checkbox" ng-model="deleted">
</label>
<button class="btn btn-danger btn-small" (click)="deleteTodo(i)">X</button>
</li>
</ul>
At first, in Angular it's [(ngModel)], not ng-model as in AngularJs.
Also, you can't have a single variable (deleted) to handle all items in your *ngFor.
To make it wok apply the changes:
...
<p [ngClass]="{strike: todo.deleted}">test</p>
<label>
<input type="checkbox"
[(ngModel)]="todo.deleted">
</label>
...
DEMO
use <s> tag instead of <strike> tag
Ex:
if you want <strike> Not Aailable </strike>
and it is not supported by angular 4 and above versions then,
use <s>Not Available</s>
Related
I'm writing a todolist demo.I try to double click to edit the item ,but it has no effect and no error.
the code as below
<li *ngFor="let todo of todos; let i = index;"
[ngClass]="{
completed: todo.isDone,
editing: currentEditing === todo
}"
>
<div class="view">
<input class="toggle" type="checkbox" [(ngModel)]="todo.isDone" >
<label (dblclick)="currentEditing = todo"> {{ todo.title }}</label>
<button class="destroy" (click)="delete(i)"> </button>
</div>
<input class="edit" value="Create a TodoMVC template">
</li>
but when i use (click),the item can editing.
<label (click)="currentEditing = todo"> {{ todo.title }}</label>
Can anyone see what I'm doing wrong? thanks!
Hi here is a link given below where dblclick work properly both for button and label on stackblitz. However, it works in different way as you have tried already. Please check: https://stackblitz.com/edit/angular-double-click-bndehs?file=src%2Fapp%2Fapp.component.html
Note: Please Check DoubleClickDirective class inside double-click.directive.ts file and #HostListener
for getCities(), i am fetching data from api,
which i just showed in li tag, i am in deliama how to submit the check box value,
when customer will check for multiple cities
<form #hlForm="ngForm" (ngSubmit)="filterData(hlForm)">
<span>
<button type="submit" class="btn-blue" (click)="getCities()">Select City</button>
<ul class="location-filter" *ngIf="cityList">
<li *ngFor="let city of cityList">
{{city}} <input type="checkbox" name="selectCity">
</li>
</ul>
</span>
<button type="submit" value="submit">submit</button>
</form>
When using template driven forms, add NgModel to the element attributes.
You should also add a unique name to each li element to be able to differentiate between values:
<li *ngFor="let city of cityList">
{{city.name}} <input type="checkbox" [name]="city.name" ngModel>
</li>
Stackblitz demo
You need to have an array where you can store all your selected cities, and update this array each time a checkbox for a city is checked/unchecked.
Change your code to:
<form #hlForm="ngForm" (ngSubmit)="filterData(hlForm)">
<span>
<button type="submit" class="btn-blue" (click)="getCities()">Select City</button>
<ul class="location-filter" *ngIf="cityList">
<li *ngFor="let city of cityList">
{{city}} <input value={{city}} (change)="onCheckChange($event)" type="checkbox" name="selectCity">
</li>
</ul>
</span>
<button type="submit" value="submit">submit</button>
</form>
And your onCheckChange method would look like this:
onCheckChange(event: any)
{
console.log(event.target.value)
if (event.target.checked)
{
this.selectedCities.push(event.target.value);
}
else
{
this.selectedCities = this.selectedCities.filter(x => x !== event.target.value);
}
}
Take a look at this Stackblitz illustrating this.
You can reference DOM element by using the # selector and viewchild.
In your .ts you can get the element like this:
#ViewChild('yourSelector') anyName: Input
and then call any function that exists on the element. and in your .html you use the # selector:
<input #yourSelector type="checkbox"....
Different 'ng-model name' in ng repeat - Possible?
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
In this case, there are some repeat todo item (based on todos json data) will show on frontend
My Problem: What i type on any input field , all input field showing same data
I need different ng-model name on each input field , I guess like this ng-model="tag($index)"
You could place the newly created model inside tag array by its $index, while declaring model inside the tag you should use array notation [] instead of ()
ng-model="tag($index)"
should be
ng-model="tag[$index]"
Markup
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[$index]">
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
It is possible like below
<div ng-repeat="todo in todos">
<input type="text" ng-model="tag[todo]"> <--todo.key-->
<button type="submit"ng-click="addTodo(todo._id)">Add</button>
</div>
You can do it like this:
<input type="text" ng-model="todo.tag">
I'm trying to get ParsleyJS to work with a button group and drop down select. How can this be done?
I have tried adding it via JS but it's still not working. Here is my html code
<div class="btn-group m-r">
<button data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle">
<span class="dropdown-label" data-placeholder='{{_ "pleaseSelect"}}' data-parsley-required>{{_ "type"}} </span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-select">
<li><input type="checkbox" name="d-s-c-1">Association</li>
<li><input type="checkbox" name="d-s-c-2">Cooperative</li>
<li><input type="checkbox" name="d-s-c-3">Cluster</li>
<li><input type="checkbox" name="d-s-c-4">Contract Farming</li>
<li><input type="checkbox" name="d-s-c-5">Individual Farm</li>
</ul>
</div>
You can't add data-parsley-required to a span as it won't work. You need to add the attribute to the input.
Assuming that at least one checkbox is required, you can use the following code (jsfiddle available):
<div class="btn-group m-r">
<button data-toggle="dropdown" class="btn btn-sm btn-white dropdown-toggle">
<span class="dropdown-label" data-placeholder='{{_ "pleaseSelect"}}'>{{_ "type"}} </span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-select">
<li><input type="checkbox" name="d-s-c-1" data-parsley-multiple="d-s-c" required data-parsley-errors-container="#message-holder">Association</li>
<li><input type="checkbox" name="d-s-c-2" data-parsley-multiple="d-s-c">Cooperative</li>
<li><input type="checkbox" name="d-s-c-3" data-parsley-multiple="d-s-c">Cluster</li>
<li><input type="checkbox" name="d-s-c-4" data-parsley-multiple="d-s-c">Contract Farming</li>
<li><input type="checkbox" name="d-s-c-5" data-parsley-multiple="d-s-c">Individual Farm</li>
</ul>
<div id="message-holder"></div>
</div>
What's changed:
Removed data-parsley-required from <span>
Added data-parsley-multiple='d-s-c' to all checkboxes. Take a look at the documentation where it states:
You can add this attribute to radio / checkboxes elements like this: data-parsley-multiple="mymultiplelink" to link them together even if they don't share the same name.
I'm assuming that you want to validate that, at least one checkbox is checked. If we didn't add this attribute, all checkboxes would be required.
Added attribute required to the first checkbox. This makes the group defined by data-parsley-multiple required.
Added data-parsley-errors-container="#message-holder" so the error messages appear outside the dropdown. Note that I've added <div id="message-holder"></div> after the <ul>.
As a final note, we only need to set 3. and 4. to the first checkbox. Since Parlsey will "group" the checkboxes you don't need to repeat this code for every checkbox (note: if you do repeat this code, there's no problem).
I keep wondering why did facebook use like submit from button and not just simple link to do the action with, following is there like button code.
<form rel="async" class="live_184361748268334 commentable_item autoexpand_mode" method="post" action="/ajax/ufi/modify.php" data-live="{"seq":0}" onsubmit="return Event.__inlineSubmit(this,event)">
<input name="charset_test" value="€,´,€,´,水,Д,Є" type="hidden">
<input autocomplete="off" name="post_form_id" value="1ef694751d74ce24382cfa6181f1adfe" type="hidden">
<input name="fb_dtsg" value="_19R5" autocomplete="off" type="hidden">
<input autocomplete="off" name="feedback_params" value="{"actor":"514782389","target_fbid":"184361748268334","target_profile_id":"514782389","type_id":"17","source":"1","assoc_obj_id":"","source_app_id":"2309869772","extra_story_params":[],"content_timestamp":"1298066944","check_hash":"e76c88ca6e20b4a0"}" type="hidden">
<div class="UIImageBlock clearfix"><i class="UIImageBlock_Image UIImageBlock_ICON_Image img sp_4b2fk0 sx_b64365"></i>
<div class="UIImageBlock_Content UIImageBlock_ICON_Content"><span class="uiStreamSource"><abbr title="Saturday, February 19, 2011 at 3:09am" data-date="Fri, 18 Feb 2011 14:09:04 -0800" class="timestamp">4 hours ago</abbr></span><span class="UIActionLinks UIActionLinks_bottom" data-ft="{"type":"action"}"> ·
<button class="like_link stat_elem as_link" title="Like this item" type="submit" name="like" onclick="fc_click(this, false); return true;"><span class="default_message">Like</span><span class="saving_message">Unlike</span></button>
·
<label class="uiLinkButton comment_link" onclick="return fc_click(this);" title="Leave a comment">
<input value="Comment" type="button">
</label>
· <a title="Send this to friends or post it on your profile." href="/ajax/share_dialog.php?s=99&appid=2309869772&p%5B0%5D=514782389&p%5B1%5D=184361748268334" rel="dialog">Share</a></span></div>
</div>
<ul class="uiList uiUfi focus_target fbUfi" data-ft="{"type":"ufi"}">
<li class="ufiNub uiListItem uiListVerticalItemBorder"><i></i>
<input autocomplete="off" name="xhp_ufi" value="1" type="hidden">
</li>
<li class="ufiItem uiUfiLike">
<div class="UIImageBlock clearfix"><a class="UIImageBlock_Image UIImageBlock_ICON_Image" tabindex="-1">
<label onclick="this.form.like.click();"><i class="img sp_8dfqpl sx_4ac53f" title="Like this item"></i></label>
</a>
<div class="UIImageBlock_Content UIImageBlock_ICON_Content">Syed Murtaza Zaidi likes this.</div>
</div>
</li>
<li class="uiUfiComments uiListItem uiListVerticalItemBorder hidden_elem">
<ul class="commentList">
</ul>
</li>
<li class="uiUfiAddComment clearfix ufiItem ufiItem uiListItem uiListVerticalItemBorder uiUfiAddCommentCollapsed">
<div><img class="uiProfilePhoto actorPic UIImageBlock_Image UIImageBlock_ICON_Image uiProfilePhotoMedium img" src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/41709_1014341698_4889488_q.jpg" alt="">
<div class="commentArea UIImageBlock_Content UIImageBlock_ICON_Content">
<div class="commentBox">
<textarea class="DOMControl_placeholder uiTextareaNoResize uiTextareaAutogrow textBox textBoxContainer" title="Write a comment..." placeholder="Write a comment..." name="add_comment_text" onfocus="return wait_for_load(this, event, function() {if (!this._has_control) {new TextAreaControl(this).setAutogrow(true);this._has_control = true;}});">Write a comment...</textarea>
</div>
<label class="mts mts commentBtn stat_elem optimistic_submit uiButton uiButtonConfirm" for="u127419_35">
<input value="Comment" name="comment" id="u127419_35" type="submit">
</label>
</div>
</div>
</li>
</ul>
<input value="{"src":10,"sty":263,"actrs":"514782389","object_id":184361748268334,"pub_time":1298066944,"fbid":"184361748268334","qid":"5575216616647978849","mf_objid":184361748268334,"s_obj":5,"s_edge":1,"s_prnt":3,"pos":9,"filter":"h"}" name="link_data" type="hidden">
</form>
Because
BUTTON type="submit" and INPUT type="submit" are the standard way to submit forms
Like-action uses a POST-request because POST-requests should be used when some server-side state is altered.
Like-action contains several parameters with long values. Some browsers have a limit to URL length and the parameters of the like-action might exceed that length if it was sent as a GET-request.
Using standard elements allows all browsers to submit like-action correctly as a POST-request even without javascript. Using links would result in a GET-request.
I never noticed that it was a button and not a link, nice catch.
It's likely because the "Like" action isn't a true link. It doesn't take you anywhere. So while they styled it like a link, it isn't actually a link. They could have used a link, sure, but I think using the button is a bit more correct. Clicking a button performs an action, as opposed to a link which takes you to a new page. That matches well with what happens when you "like" something on facebook.
Even the mobile version seems to use links. The button must be a remnant from the time they thought they needed to support more restrictive browser settings. – Aleksi