I am having the following Piece of Code:
<div class="custom-control custom-checkbox" *ngFor="let airline of airlines">
<input type="checkbox" (click)="airLineFilter($event)" value="{{airline}}" name="{{airline}}" class="custom-control-input">
<label class="custom-control-label" for="{{airline}}">{{airline}}</label>
</div>
When this was without *ngFor (click) event was working fine like this:
<div class="custom-control custom-checkbox">
<input type="checkbox" id="americanAir" (click)="airLineFilter($event)" value="American Airlines" name="airlines" class="custom-control-input">
<label class="custom-control-label" for="americanAir">American Airlines</label>
</div>
But after using *ngFor click event is not getting triggered. Is there something I can do to fix this.?
After going through many options I finally found the solution.
It is due to Id attribute of checkbox and for attribute of label.
When I changed my code to something like this it worked:
<div class="custom-control custom-checkbox" *ngFor="let airline of airlines;let i = $index;">
<input type="checkbox" id="airline{{i}}" (click)="airLineFilter($event)" value="{{airline}}" name="{{airline}}" class="custom-control-input">
<label class="custom-control-label" for="airline{{i}}">{{airline}}</label>
</div>
Related
I have the following form and I need that after the user clicks Save, an error message shows next to the radio group that is required (but no radio selected). I tried the following but it doesn't show the message at all.
<form #formList="ngForm" (ngSubmit)="Save(formList)">
<div *ngFor="let item of data">
<p>{{item.name}}</p>
<input type="radio" name="{{item.id}}" [value]="1" [(ngModel)]="item.isSelected" required>Foo
<input type="radio" name="{{item.id}}" [value]="2" [(ngModel)]="item.isSelected">Bar
<div *ngIf="formList.controls.item?.id.required">
The radio is required!
</div>
</div>
<button type="submit">Save</button>
</form>
Try this code
<form #formList="ngForm" (ngSubmit)="Save(formList)">
<div *ngFor="let item of data">
<p>{{item.name}}</p>
<input type="radio" name="{{item.id}}" [value]="1" [(ngModel)]="item.isSelected" required>Foo
<input type="radio" name="{{item.id}}" [value]="2" [(ngModel)]="item.isSelected">Bar
<div *ngIf="!formList.form.valid">
The radio is required!
</div>
</div>
<button type="submit">Save</button>
</form>
I am trying to create multiple divs on the fly using a template which is called for a number of times and each time i create a new div ... which seems to be working fine below is the code. I am passing a map tempMap from the controller to the gsp page which is of the below format
tempMap = [key_1:v1,key_2:v2,key_3:v3] //from the controller
//this is the gsp part
<g:set var="counter" value="${1}" />
<g:while test="${counter <= tempMap.counter}">
<g:render template="travelDetailsToShow" />
<g:set var="counter" value="${counter + 1}" />
</g:while>
I need to set the ids of the elements based on the counter which also is working ... But i am unable to set the values of the fields.
<div class="col-sm-6" id="key_${counter}"> // This sets the id to key_1, key_2 depending on the counter value
<div class="form-group">
<label>Departure Date</label>
<span class="input-icon-right input-group">
<g:set var="temp" value="kep_${counter}" />
**<input type="text" name="key_${counter}" class="form-control" value="${tempMap?.key_${counter}}" readonly></input> // this does not work**
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>
I searched a lot but with no luck ... can anyone tell me where am i going wrong with this .. Any help is appreciated ... Thanks in advance people
The render tag has a model attribute. It works like the model passed from controller to view. You can use it to pass data into the template.
view
<g:each in="${1..tempMap.counter}" var="counter">
<g:set var="key" value="key_${counter}">
<g:render template="travelDetailsToShow" model="${[id: key, value: tempMap[key]]}"/>
</g:each>
template
<div class="col-sm-6" id="${id}">
<div class="form-group">
<label>Departure Date</label>
<span class="input-icon-right input-group">
<input type="text" name="${id}" class="form-control" value="${value}" readonly></input>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>
Thanks Emmanuel for your answer ... but i think i wasnt clear enough and misled you to think that the "key" would be static ... As your logic would expect the static value "key" ..... The proper structure of the map is below ...
tempMap = [key_1:v1,anotherkey_1:v2,yetanotherkey_1:v3,key_2:v4,anotherkey_2:v5,yetanotherkey_2:v6]
I havent tried out the solution posted by you but got another solution to work.... code for which is below ...
<div class="col-sm-6" id="key_${counter}">
<div class="form-group">
<label>Departure Date</label>
<span class="input-icon-right input-group">
<input type="text" name="key_${counter}" class="form-control" value='${tempMap?."${'key_' + counter}"}' readonly></input>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>
<div class="col-sm-6" id="anotherkey_${counter}">
<div class="form-group">
<label>Return Date</label>
<span class="input-icon-right input-group">
<input type="text" name="anotherkey_${counter}" class="form-control" value='${tempMap?."${'another_' + counter}"}' readonly></input>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>
</div>
The problem was that i was not referencing the value in the Map properly... The code that fails is stated below.
<div class="col-sm-6" id="departureDate_${counter}">
<div class="form-group">
<label>Departure Date</label>
<span class="input-icon-right input-group">
**<input type="text" name="departureDate_${counter}" class="form-control" value="${tempMap?.${departureDate_counter}"} readonly></input>** // THIS CODE DOES NOT WORK. This will look for a key ${departureDate_counter} and will through a gsp error that tags have not been closed
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</span>
</div>
</div>
Although i have found a solution to my problem it would be nice if we posted more solutions as i feel that not a lot of solutions are present on the net for grails and gsp ...
I am using the acts-as-taggable gem in a Rails 4 app with an angular frontend. If I use the console it works fine. I have done all the obvious things and I can get it to work by adding this to the create controller:
if params[:tag_list]
droplet.tag_list.add(params[:tag_list], parse: true)
end
The problem is that it should be doing this anyway. Does anyone have any insight as to why it is simply not firing the tag_list.add method automatically? I am uncomfortable using this hack to get it to work.
And yes, I have added :tag_list to the strong parameters.
Update: The form html
<form ng-submit="createNewDropletForm.$valid && createNewDroplet()" name="createNewDropletForm" novalidate>
<div class="form-group">
<label for="name">Title:</label>
<input ng-keyup="keyup()" ng-model="drop.name" ng-model-options="{ debounce: 500 }" type="text" class="form-control" placeholder="Add Droplet Title Here" required>
</div>
<div class="form-group">
<label for="description">Description:</label>
<textarea class="form-control" rows="4" ng-model="drop.description" placeholder="Add helpful description of what this droplet tests." required></textarea>
</div>
<div class="form-group">
<label for="tags">Tags:</label>
<input class="form-control" ng-model="drop.tag_list" placeholder="add tags separated by commas">
</div>
<button type="submit" class="btn btn-default">Next</button>
</form>
i've got this code using Jquery Mobile :
<div role="main" class="ui-content">
<form action="/" method="post">
<fieldset data-role="controlgroup">
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked="">
<label for="checkbox-1a">Cheetos</label>
<input type="checkbox" name="checkbox-2a" id="checkbox-2a">
<label for="checkbox-2a">Doritos</label>
<input type="checkbox" name="checkbox-3a" id="checkbox-3a">
<label for="checkbox-3a">Fritos</label>
<input type="checkbox" name="checkbox-4a" id="checkbox-4a">
<label for="checkbox-4a">Sun Chips</label>
</fieldset>
</form>
</div>
The problem is that when i load the page the codes looks like this :
<div class="ui-controlgroup-controls ">
<div class="ui-checkbox">
I've skipped the whole code, the problem is in the
that should not be there.
Any idea about how to fix it?
This problem comes when copying and pasting the source code from their website.
In fact in this way you copy also invisible blank spaces which are converted as by the browser and make the last block go down.
To solve the issue simply remove all the spaces between the tags and all will be displayed correctly.
There are many ways you can remove the automatic default padding.
First
<div style="padding: 0;">...</div>
Second: Define an id for the div tag and set padding to 0 in css
<div id="myID">
#myID{ padding:0; }
I am developing a mobile application with jQuery mobile and backbone. I have backbone model change event function, if any changes in the model, I simply destroy the whole page and recreate with template binding. i use $('#pageId').page('destroy').page(); which works fine.
I want to do the samething for dialog (just destory the dialog and recreate the dialog and display it). Can you anyone tell me the right method to call.... I just tried with .dialog() but i didn't work.. thanks in advance.
my dialog code.
<div data-role="dialog" id="myDialog" data-close-btn="right">
<div data-role="header" class="ui-corner-top">
<h1>dialog</h1>
</div>
<div data-role="content">
<form id="myForm">
<fieldset>
<label for="fromDate">Date From</label>
<input id="fromDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<fieldset>
<label for="toDate">Date To</label>
<input id="toDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<input type="submit" value="submit" id="btnSubmit" data-inline="true" />
</form>
</div>
</div>