I have a check box:
<td class="text-center">
<div data-strat-form-control data-field-display-id="20" data-vmformreadonly="formReadOnly" data-show-tool-tip="showToolTip(contract.fields[5].htmlName)" data-strat-model="contract" data-field="contract.fields[5]"></div>
</td>
When clicked it is changing some field values. The 2nd and 3rd column change to N, 12.
I tried adding bind-once to the div and there was no effect. Then I tried ng-non-bindable and the checkbox dissapears.
How can I get this checkbox not to have an effect?
Related
I am trying to implement a radio group in a list of items. I am unable to set the radion button checked based on the value. Please guide me.
HTML
<div *ngFor="let item of data; let i = index">
<nb-radio-group class="p-3 d-inline-flex">
<nb-radio [checked]="item.data.v === true">open</nb-radio>
<nb-radio [checked]="item.data.v === false">close</nb-radio>
</nb-radio-group>
</div>
only the radio button in last item of an array shows wether the radio button is checked or not. others does not bind data properly.
Please consider using the value property
<nb-radio-group class="p-3 d-inline-flex" [(value)]="item.data.v">
<nb-radio [value]="true">open</nb-radio>
<nb-radio [value]="false">close</nb-radio>
</nb-radio-group>
you should use a *ngswitch to display your opion then based on if the user click or not you will bind data see this example using checkbox and also item.data,v should be a boolean
enter code here
<td><input type="checkbox" [(ngModel)]="item.done" /></td>
<td [ngSwitch]="item.done">
<span *ngSwitchCase="true">
Yes
</span>
<span *ngSwitchDefault>
No
</span>
</td>
and also u should use a filter to return data based on true or false
I have 2 issues that are occurring when i use radio buttons in angular.
I want the default value when the user refreshes the page or visits it for the first time to have the "All()" option selected (i have the checked property set but the default is still not there)
When i click the "All()" radio button, it shows all the list items (as it should). The problem occurs when i click another button to filter with another string; the issue is when i click "All()" again, the filter seems to ignore that the "All()" button is selected altogether.
Basically I want the All() radio button to show unfiltered results.
Here is the plunker:
http://plnkr.co/edit/Bdaaq3cycKPt57h03LX7?p=preview
<body ng-controller="candyController">
<input type="radio" value="" checked="checked" ng-model="$parent.selectedCandy" name="Candy" />(All)
<div data-ng-repeat="candy in candyList">
<input type="radio" value="{{candy.name}}" ng-model="$parent.selectedCandy" name="Candy" />
{{candy.name}}
</div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
<tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
<td>{{candy.name}}</td>
<td>{{candy.cost}}</td>
</tr>
</tbody>
</table>
</body>
</html>
and here is the controller
var app = angular.module('angularjs-starter', []);
app.controller('candyController', function($scope) {
$scope.candyList = [
{name:"lolipop", cost:10},
{name:"popsicle", cost:100},
{name:"ringpop", cost:50},
{name:"mint", cost:2},
{name:"chocolate", cost:85},
{name:"candycorn", cost:1}
];
});
I want the default value when the user refreshes the page or visits it for the first time to have the "All()" option selected (i have the checked property set but the default is still not there)
For this I would set the property on the scope in the controller when it is initiated: $scope.selectedCandy = "";
When i click the "All()" radio button, it shows all the list items (as it should). The problem occurs when i click another button to filter with another string; the issue is when i click "All()" again, the filter seems to ignore that the "All()" button is selected altogether.
The problem seems to be with your scope. You target selectedCandy on the $parent scope when repeating the radio buttons (which is correct because your controller scope is above your repeater scope).
When you use $parent.selectedCandy on the radio outside of the repeater it is looking above its scope and not on the controller scope.
Simply remove $parent from the "all" radio.
**ng-value Per Docs**
Binds the given expression to the value of <option> or input[radio],
so that when the element is selected, the ngModel of that element is
set to the bound value.
Use ng-value instead of value attribute for make binding workable with respective ng-model on the radio button.
Additionally the (All) radio button doesn't need $parent anotation. it should be directly used as ng-model="selectedCandy", for inner radio button will need $parent because we want to refer controller scope variable.
Markup
<body ng-controller="candyController">
<input type="radio" ng-value="" checked="checked" ng-model="selectedCandy" name="Candy" />(All)
<div data-ng-repeat="candy in candyList">
<input type="radio" ng-value="candy.name" ng-model="$parent.selectedCandy" name="Candy" /> {{candy.name}}
</div>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Cost</th>
</tr>
<tr ng-repeat="candy in candyList | filter:{name:selectedCandy}">
<td>{{candy.name}}</td>
<td>{{candy.cost}}</td>
</tr>
</tbody>
</table>
</body>
I am trying to make a form with radio button in bootstrap, such that whenever a radio button is toggled, a different form with new fields should appear subsequently:
<tr>
<td><label for="exampleInputEmail3" class="input-group">1 or 2 ? </label></td>
<td>
<select id="whatever" name="whatever" class="input-group">
<input type="radio" name="radioName" value="1" />one<br />
<input type="radio" name="radioName" value="2" />two<br />>
</select>
</td>
</tr>
If user selects option 1, form 1 needs to be displayed just below it otherwise form 2 needs to be shown.
The form 1 looks like:
<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">1</label></td>
</tr>
The form 2 looks exactly the same with different label:
<tr id="whatever_description">
<td><label for="exampleInputEmail3" class="control-label">2</label></td>
</tr>
You can use Jquery to do this easily.
First you can use the .val() function to get the value of the radio button you checked.
Then you can use the hide/show functions to show the right form and hide the other.
I hope this helps you out.
First, you'll need different ID's for your table rows. Two elements cannot share the same ID. You can listen for changes with the change function and then toggle the visibility of both rows at the same time by using the comma to grab multiple selectors and then show/hide each respectively with toggle
$('input[name="radioName"]').change(function () {
$("#whatever_description1, #whatever_description2").toggle();
});
Here's a demo in fiddle
If you want more control, see get value from radio group using jquery
I have a drop down menu for which one option is 'Other'. Each option is tored in a table with an id ie if OptionId = 6, OptionDescription is "Other".
If 'Other' is chosen, a text box should appear for the user to enter specifically what the other criteria is:
<tr>
<td class="labels">
Option:
</td>
<td colspan="3">
<%=Html.DropDownList("OptionId", Utilities.OptionLookup(), "-Select One-") %>
</td>
<td>
<input id="OtherOption" type="text" />
</td>
</tr>
In this case, Utilities.OptionLookup() gets the values from my Option table and populates the dd. At the moment, I just have a a plain textbox OtherOption.
I've used javascript before to do something like this but it's based on a click event. So, I set the text box to 'display:none', use onclick to name my script and do the visible true or false in my script.
I want to be able to do something similar but when 'Other' is selected in my drop down.
What's the best way to do this?
You can do it the same way, but instead of the onclick event, you utilize the onchange event.
I am trying to figure out how to tab through HTML tables cells inside a contenteditable div. I know most people would say why are you doing that in the first place. I am working on a text editor that allows the user to insert a pre-formatted table where ever they want. I have tackled inserting the table dynamically at the users cursor but I cannot figure out how to let the user tab from the content to the html table and through each cell. I have tried input boxes which allows them to tab through but it leaves selector bars on each corner and still requires the user to double click on the cell to add content. I have also tried just table cells and it will not tab to the cells it just jumps over them. Any help would be much appreciated... after conquering the tracking of the cursor for inserting the table I thought I was home free... :(
<div id="divbilltext" runat="server" contenteditable="true" style="height:auto;">
<table>
<tr>
<td>
<input type="text" id="a" tabindex="1"/>
</td>
<td>
<input type="text" id="b" tabindex="2"/>
</td>
<td>
<input type="text" id="c" tabindex="3"/>
</td>
</tr>
</table>
</div>
tabindex would be the most consistent way of achieving this:
http://www.w3.org/TR/html4/interact/forms.html#adef-tabindex
however tabindex is supported by specific elements only: A, AREA, BUTTON, INPUT, OBJECT, SELECT, and TEXTAREA.