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
Related
what i am trying to do here is, i have an ng-repeat in a form and if i click anyone of those input buttons corresponding all buttons get disabled
<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
<hr>
<p>Q. {{question.questionText}}</p>
<form >
<div ng-repeat=" option in question.questionOptions track by $index">
<label>
<input name="options" type="radio" value="$index" ng-click="sinSurCtrl.questionId=question.questionId; sinSurCtrl.answer=$index+1; sinSurCtrl.createAnswer()" onclick="this.disabled = true">
<span> {{option}} {{$index+1}} {{question.questionId}} </span>
</label>
</div>
</form>
</div>
here is the view-
as you can see if i select anyone of those option it is getting disabled but what i am trying to do is if i attempt anyone option then options corresponding to the same question get disabled.
for example-
in Q3. which is a better orator ?
if i choose option (a) then it get selected and after that automatically bot options (a) and (b) get disabled.
Note- please try to keep solution completely in angularjs or if you want use affordable amount of javascript other then that please avoid using external libraries like jQuery(i know nobody in his senses will handle trouble of using jQuery and angular together but for the sake of example i have included its name)
Proposed solution with some suggested refactoring...
First change the ng-click directive to point to a new onOptionButtonClicked function on sinSurCtrl which takes in the two parameters question and index (which it needs to carry out it's work):
<div ng-repeat="question in sinSurCtrl.singleSurvey" ng-show="!$first">
<hr>
<p>Q. {{question.questionText}}</p>
<form>
<div ng-repeat="option in question.questionOptions track by $index">
<label>
<input
name="options"
type="radio"
value="$index"
ng-click="onOptionButtonClicked(question, $index)"
ng-disabled="question.disabled">
<span> {{option}} {{$index+1}} {{question.questionId}} </span>
</label>
</div>
</form>
</div>
Also take note of the newly added ng-disabled="question.disabled" directive. This is part of the mechanism that will enable/disable the question's controls.
Now move the variable assignments to the new onOptionButtonClicked function. The controller is generally a better place (than the view) for variable assignments, especially if there are several of them on the same directive.
sinSurCtrl.onOptionButtonClicked = onOptionButtonClicked;
function onOptionButtonClicked(question, index){
sinSurCtrl.questionId=question.questionId;
sinSurCtrl.answer=index;
sinSurCtrl.createAnswer();
question.disabled = true; // <--- This is what disables the option buttons
}
This is where an answered question object gets it's disabled property set to true. This in combination with the ng-disabled directive mentioned previously is what disables the option buttons.
On your controller, create a function that checks if a given questionId has been answered and return truthy if it has. Call that function in ng-disabled in the input tag:
<input type="radio" ng-disabled="sinSurCtrl.questionHasAnswer(question.questionId)" ... />
I am using AngularJS v1.4.3 and Bootstrap v3.3.6.
I have created a list of radio buttons like below
<div>
<label>Pizza</label>
<ul ng-repeat="option in pizzaOptions">
<input type="radio" name="pizza" ng-model="pickedPizza"
ng-value="{{option}}">
{{option.displayText}}
</ul>
</div>
ngModel- pickedPizza is an object.
When selecting an option the user's selection is saved correctly. The radio button shows the user has selected an option. Once the user navigates to the next page and back the option is no longer selected although ngModel is still populated correctly.
When the ngModel is not an object and I do not need to use ngValue (like below), navigating away from the page and back repopulates the selection fine.
<div>
<label>Drink</label>
<ul ng-repeat="option in drinkOptions">
<input type="radio" name="drink"
ng-model="drinkSelected" value="{{option}}">
{{option}}
</ul>
</div>
As georgeawg said, the model needs to be a dot object
so instead of $scope.pickedPizza = {displayText: 'cheese'} it needs to be $scope.pickedPizza = { value : {displayText: 'cheese'} }; and ng-model='pickedPizza.value' or something similar.
Demo
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>
How can I get the radio button clicked value?
Actually I need a custom filter for gender which I selected in my <form>. From the output I need to filter with gender. My filter and orderBy in ng-repeat is not working properly.
Here is a link to my Plunker example: http://plnkr.co/edit/7ZBcMDrJzSreD73R9aNq?p=preview
for(var i=0;i<$scope.details.length;i++) {
if($scope.details[i]===$scope.options[i])
$scope.details=myService.getForm($scope.user);
}
In your Plunker given the value from the Gender is getting within the $scope.user
$scope.submitTheForm=function(){
myService.setForm($scope.user);
$scope.user={};
};
Check this Working Demo
I'm not sure about your jsfiddle but here is a quick example of how you do it:
<div class="radio" data-ng-repeat="detail in details">
<label>
<input type="radio" data-ng-model="$parent.ngModel" name="ngModel" value="{{detail.id}}" required />
{{detail.title}}
</label>
</div>
in your controller just use $scope.ngModel and you will get the result.
How to set Radio button checked(select) using Attribute value
html :
<div class="controls">
<input type="radio" id="chairs_canadd" name="chairs_canadd" value="1" />
<input type="radio" id="chairs_canadd" name="chairs_canadd" value="0" />
</div>
now i m getting the value of chairs_canadd value from database via AJAX. if the value is 0 then the second have to get selected , if the value is 1 then first one has to be get selected.
Firstly, your IDs are not unique.
Second, a radio button group like this can only have one checked value at a time. So why not just use .val:
$('input:radio[name=chairs_canadd]').val([editValue.chairs_canadd]);
jsFiddle
You have value for option that needs to be set in variable chairs_canadd. you can get the radio button by value and then set it. Like this:
$(".controls input[value="+chairs_canadd+"]").prop("checked", true)