I have table of emails with <TR>'s being repeated with v-repeat followed with a single <TR> for displaying an empty form for adding a new email.
Problem is that the <TR> with empty form always appears as the FIRST row BEFORE the list of existing email <TR>s.
Is there a way to force the <TR> with the empty email form to render AFTER the list of email <TR>'s?
<section v-show="emails" v-cloak>
<table id="email-list">
<tbody>
<tr
v-repeat="email: emails"
class="email"
v-class="
editing : this == editedEmail
"
>
<td>
<input
class = "edit"
type = "text"
v-model = "email.address | addressValidator"
v-on = "
click : editAddress(this, $index),
blur : doneEdit(this, $index),
keyup : doneEdit(this, $index) | key 'enter',
keyup : cancelEdit(this, $index) | key 'esc'
"
>
</td>
<td>
<a
class="btn btn-xs btn-danger"
style="cursor:pointer;"
v-on="click: removeEmail(this, $index)"
>
<i class="fa fa-trash"></i>
</a>
</td>
</tr>
</tbody>
<tfoot>
<tr
class="email"
v-class="
editing : this == editedEmail
"
>
<form
id="add-new-form"
v-on="submit:addNew"
>
<input
id="0"
autofocus
autocomplete="off"
placeholder="New Email Address"
v-model="newEmail.address | addressValidator"
>
<button
type="submit"
v-show="newEmail.address && validation.address"
class="btn btn-xs btn-success"
style="cursor:pointer;"
>
<i class="fa fa-plus"></i>
</button>
</form>
</tr>
</tfoot>
</table>
</section>
A form can’t be a direct child of a table row. Put it outside of the table as it is not part of the datas.
#Samuel De Backer pointed out the problem in his comment to my question.
Related
I have 2 radio buttons, which I assigned values of '0' and '1' respectively. I need to get the value when I click my Save Button but It returns an Undefined value. Here is my code. What could be my problem?
<tr ng-repeat="item in recruleData">
<td>
{{item.package_name}}
</td>
<td>
<input type="radio" name="radio" ng-model="radio.selectedProductBlock"
value="0" >A<br/>
<input type="radio" name="radio" ng-model="radio.selectedProductBlock"
value="1" > B
</td>
<a class="btn btn-primary pull-right" ng-click="radioValue();">Save</a>
</tr>
my JS Code
$scope.selectedProductBlock;
$scope.radioValue= function(){
alert($scope.selectedProductBlock);
}
You need to define a variable of type boolean inside the object radio,
$scope.radio = {};
$scope.radio.selectedProductBlock = false;
and then
And radioValue function
$scope.radioValue = function(){
console.log($scope.radio.selectedProductBlock);
}
According to your requirement, you need to define radio object in recruleData
each record
Ex :
$scope.recruleData = [
{"package_name" : "package1", "radio":{"selectedProductBlock":""}},
{"package_name" : "package1", "radio":{"selectedProductBlock":""}},
]
And radioValue function
$scope.radioValue= function(item){
alert(item.radio.selectedProductBlock);
}
In addition, you need to give a unique name for each row radio button groups. You can simply achieve that append $index to your radio button name.
HTML Code
<table>
<tr>
<th>Package</th>
<th>Actioins</th>
<th></th>
</tr>
<tr ng-repeat="item in recruleData">
<td>
{{item.package_name}}
</td>
<td>
<input type="radio" name="radio_{{$index}}" ng-model="item.radio.selectedProductBlock"
value="0" >A<br/>
<input type="radio" name="radio_{{$index}}" ng-model="item.radio.selectedProductBlock"
value="1" > B
</td>
<td><a class="btn btn-primary pull-right" ng-click="radioValue(item);">Save</a></td>
</tr>
</table>
Working JSFiddel
I am new in Angular 4.x. I have a html table. Every row has a checkbox and a checkbox. I want to bind checkbox with button, so that when the checkbox is checked, the button is enabled, and when the checkbox in unchecked, the button is disabled:
here is a sample of code, but it is not working :
<tbody>
<tr *ngFor="let item of mf.data; let i = index;">
<td><input type="checkbox" value="" [checked]="item.checked"></td>
<td>{{i}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.age}}</td>
<td>{{item.city | uppercase}}</td>
<td><button type="button" class="btn btn-success" [disabled]="item.checked">start</button></td>
</tr>
</tbody>
Can you help me to make this work please ?
use [(ngModel)]. Because check will not enable the two-way binding. It just handles One-way changing
<td><input type="checkbox" value="" [(ngModel)]="item.checked"></td>
make the button disable not equal to item check, like this [disabled]="!item.checked"
<td><button type="button" class="btn btn-success" [disabled]="!item.checked">start</button></td>
Currently your checkbox only binds one way. To apply changes by clicking it, add the following to your input tag:
(change)="item.checked = !item.checked"
You don't need checked directive. Just binding the model is enough.
<tbody>
<tr *ngFor="let item of mf.data; let i = index;">
<td><input type="checkbox" [(ngModel)]="item.checked"></td>
<td>{{i}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.age}}</td>
<td>{{item.city | uppercase}}</td>
<td><button type="button" class="btn btn-success" [disabled]="!item.checked">start</button></td>
<pre>{{item.checked}}</pre>
</tr>
</tbody>
<tbody>
<tr *ngFor="let item of mf.data; let i = index;">
<td><input type="checkbox" value="" [checked]="item.checked"></td>
<td>{{i}}</td>
<td>{{item.name}}</td>
<td>{{item.email}}</td>
<td>{{item.age}}</td>
<td>{{item.city | uppercase}}</td>
<td><button type="button" class="btn btn-success" [disabled]="item.checked">start</button></td>
</tr>
</tbody>
Use this:
<td>
<div class="togglebutton">
<label>
<input type="checkbox" [checked]="record.status" (change)="changeStatus(record.id,$event)">
<span class="toggle"></span>
</label>
</div>
</td>
Hello everyone,
I am not able to give a uniq identity to the button tag.
Here is my code..
<button class="btn-class" name="%(action_search_hotel)d"
string="Search" type="action"
icon="terp-gtk-jump-to-ltr"
/>
and here is the HTML code from the firebug...
<td class="oe_list_field_cell oe_list_field_action oe-button " data-field="247">
<button class="" type="button" title="Search">
<img alt="Search" src="http://localhost:8089/web/static/src/img/icons/terp-gtk-jump-to-ltr.png">
</button>
</td>
same is for id . I need these for copying the URL but not able to succeed
I am pulling data from database into a table.
A fraction of the table code is as below
<tr>
<th>Approved</th>
<th>Edit</th>
</tr>
<tr ng-repeat="x in list">
<td>
<span data-ng-show="!editable">{{x.approved}}</span>
<span data-ng-show="editable">
<select style="" class="form-control" ng-model="x.approved">
<option value="Y">Y</option>
<option value="N">N</option>
</select>
</span>
</td>
<td>
<span type="submit" data-ng-hide="editable" data-ng-click="editable = true" class="glyphicon glyphicon-edit"></span>
<span type="submit" data-ng-show="editable" data-ng-click="editable = false; change($index)" class="glyphicon glyphicon-ok-circle"></span>
<span type="submit" data-ng-show="editable" data-ng-click="editable = false; cancel()" class="glyphicon glyphicon-remove-circle"></span>
</td>
</tr>
Approved column gives either a 'Y' or a 'N'.
I have written the javascript code(change($index) functionality) at the backend to exchange values of Y and N on my necessity.
the second column shows an editable icon at all times for me to change values. I want it to show the editable icon only when {{x.approved}} == N so that i can change the approved status to Y.
I am not sure how or where to use the ng-show option.
Tried but not able to understand if ng-show='{{x.approved}}=="N"' works or not in the "td" element.
Help would be appreciated.
You can use ng-show or ng-if to show,hide the element
<span type="submit" ng-if='x.approved=="N"' data-ng-click="editable = true" class="glyphicon glyphicon-edit"></span>
FIRSTLY: There is no issue with td element,It will work properly.
Use without eval-expression as we are accesing in ng-elements
ng-show='x.approved=="N"'
Instead of
ng-show='{{x.approved}}=="N"'
Secondly: Check your condition by ng-if, like
ng-if='x.approved=="N"'
Hope it will help you.
span type="submit" data-ng-hide="editable" data-ng-click="editable = true" class="glyphicon glyphicon-edit">/span>
was replaced with
span type="submit" ng-show='x.approved=="N" && !editable' data-ng-click="editable = true" class="glyphicon glyphicon-edit">/span>
I got the desired answer with the above implementation.
Thanks for the support!
I am deleting a row from a table but before deleing i want a confirmation msg. I tried using onclick and onsubmit return confirm() but its not working. Any help would be nice.
echo '<td><a href="#" title="Delete" rel='.$row['IO_ID'].' onsubmit="return confirm("Really Delete?"); class="button red">
</a></td>';
It would be
onsubmit="return confirm('Really Delete?');"
You have syntax errors in your echo. This works:
<table>
<tr>
<td><a href="#" title="Delete" rel='.$row['IO_ID'].' onsubmit="return confirm('Really Delete?');" class="button red">test
</a>
</td>
</tr>
</table>