I'm trying to check the first index, but it isn't working. I also tried to do this with ng-init.
<div class="col-md-4" ng-repeat="category in categories">
<label>
{{category.Name}}
<input type="radio" ng-checked="$index==0?true" name="pageNumber" ng-model="$parent.pageNumber" ng-value="category.Name" />
</label>
</div>
Does anyone know why?
ngChecked shouldnot be used with ngModel (https://docs.angularjs.org/api/ng/directive/ngChecked)
You can try this
<input type="radio" name="pageNumber" ng-model="$parent.pageNumber" ng-value="category.Name" />
</label>
and when the categories get populated in you controller you can add the following code after that
$scope.pageNumber = $scope.categories[0];
Try using the following expression $index==0?true:false or simply $index==0
ngChecked is expecting an expression, so by saying ng-checked="$index == 0", you're basically saying that the checkbox will always be checked or unchecked by default based on the condition output.
remove ng-value as you can also pass the element data using ng-model.
Working fiddle : http://jsfiddle.net/LYuCG/16/
You can simple write ng-checked="$first"
<div class="col-md-4" ng-repeat="category in categories">
<label>
{{category.Name}} - {{$index}} -
<input type="radio" ng-checked="$first">
</label>
</div>
Example http://jsfiddle.net/Lvc0u55v/8864/
Related
I have only one array which shows title, description and category.
As I don't know the categories (because the users can add their own) I did the categories list with an ng-repeat, same to show the items.
And I need the items to be able to filter with two filters: with a text input which filters by title (this one works really nice) and with the categories buttons (which doesn't work).
Here's how I did the ng-repeat for the categories:
<div class="list_categories">
<!-- I put 'ng-repeat-start' and 'ng-repeat-end' to be able to add the value "checked" to the first input -->
<!-- it wasn't working and #tbone849 already helped me with that-->
<label ng-click="clearAll()" ng-repeat-start="x in categories" ng-if="$first">
<input type="radio" id="optradio" name="optradio" ng-model="searchCategory.Category" value="{{x}}" checked="checked">
<p>{{x}}</p>
</label>
<label ng-click="clearAll()" ng-repeat-end ng-if="!$first">
<input type="radio" id="optradio" name="optradio" ng-model="searchCategory.Category" value="{{x}}">
<p>{{x}}</p>
</label>
</div>
And here's the ng-repeat of the items:
<div class="card" ng-repeat="x in items | filter:searcher | filter:searchCategory" >
<div class="title-space">
<h2>{{x.Title}}</h2>
</div>
<div class="description-space">
<p>{{x.Description}}</p>
</div>
</div>
For more details of my code I did a working example in this Plunker.
I hope someone can help me to make the Categories filter to work.
Use ng-checked to handle checking the first option.
<label ng-click="clearAll()" ng-repeat="x in categories">
<input type="radio" id="optradio" ng-model="searchCategory.Category" name="optradio" ng-value="{{x}}" ng-checked="$first">
<p>{{x}}</p>
</label>
I am dynamically populating the radio button using a json. And using ng-repeat to display it. My issue is that the last radio button gets picked by default which I don't want. I don't see any reason for it to be selected.
<div ng-repeat="bankAccount in availableBankAccounts">
<div class="account-list grey-bottom-border">
<div class="col-sm-6">
<label class="radio col-xs-12 spacer-top-sm option-label">
<input type="radio" name="radio2" ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId" ng-click="selectedReason(bankAccount)" required="" class="ng-untouched ng-dirty ng-valid ng-valid-required">
<span class="control-indicator control-indicator-lg hand-cursor"></span>
<span>Account ending in *{{bankAccount.depositAccountNumber|last4Digits}}</span>
</label>
<!-- <p>Account ending in *7890</p> -->
</div>
</div>
</div>
Js file:
$scope.updateDD.bankAccountId=$scope.radio7;
if($scope.availableBankAccounts.length>1)
{
$scope.createJson();
}
Any help indicating what is making last radio button select by default will be helpful.
Try $scope.availableBankAccounts.length>=1
Should work
You are giving the same value to ng-model, where you want to see the selected value and ng-value, which you want to use for value.
Instead of
ng-model="updateDD.bankAccountId" ng-value="updateDD.bankAccountId"
you should do something like
ng-model="updateDD.bankAccountId" ng-value="bankAccount.Id"
In my angular reactive form i am trying to use three state toggle switch for which i have tried three state switch separately in the link
Three state toggle stackblitz: https://stackblitz.com/edit/angular-6-template-driven-form-validation-gh1dj1
And i need to implement the same with same css inside reactive form on each row inside formarray.
For which i have tried the same html and css and given as formcontrolname like,
<div class="switch-toggle switch-3 switch-candy">
<ng-container #buttonIcon *ngFor="let option of options" >
<input type="radio" formControlName="state" [checked]="value === option"
[value]="option" />
<label (click)="onSelectionChange(option)" for="{{option}}">{{option.id}}
</label></ng-container> <a></a>
</div>
But i couldn't achieve the result.
Reactive form stackblitz: https://stackblitz.com/edit/disable-group-control-value-on-another-control-value-for-yqraay
Please click over the add button in the second stackblitz to see the result.. Added the css in app.component.css..
Kindly help me to implement the three state toggle switch as like in the first stackblitz into the reactive form in second stackblitz and need to get the values of selected toggle..
Just add an [id] to the input tag and an [attr.for] to the label tag. Something like this:
<div
class="switch-toggle switch-3 switch-candy">
<ng-container
#buttonIcon
*ngFor="let option of options">
<input
type="radio"
formControlName="state"
[value]="option"
[id]="i+option" />
<label
[attr.for]="i+option">
{{option}}
</label>
</ng-container>
<a></a>
</div>
Here's a Working Sample StackBlitz for your ref.
Thanks to A.Winnen for his comments on the performance implications of using the previous approach.
The options array in your reactive component is different than the 3 way switch you implemented. The one in the real component does not have the id.
[
"on",
"na",
"off"
]
You can still use that like this:
<ng-container #buttonIcon *ngFor="let option of options" >
<input type="radio" formControlName="state" [checked]="value === option"
[value]="option" />
<label (click)="onSelectionChange(option)" for="{{option}}">
{{option}} //**refer the object as the id filed is missing**
</label>
Second difference is, you are missing the onSelectionChange function in your reactive component
Here's a stackblitz demo for your referance.
https://stackblitz.com/edit/angular-szsw3k
I have this html:
And I want to create dynamically ng-models for these inputs:
<div class="order" ng-repeat="order in newOrders">
<input type="checkbox" ng-model="model$index" />{{$index}} please check
</div>
and it's not working.
I there a way to dynamically create ng-model in a input, inside a ng-repeat?
EDIT:
The final result is:
<input type="checkbox" ng-model="model$index" />0 please check
My expected result is:
<input type="checkbox" ng-model="model0" />0 please check
The way you are trying to do its not appropriate, creating separate
variable for each element, that will make more maintenance sort of
work.
Also this will become messy to when you apply any filter on ng-repeat. Instead of that you could place that model value inside the ng-repeat element which is order here order.
<div class="order" ng-repeat="order in newOrders">
<input type="checkbox" ng-model="order.value" />{{$index}} please check
</div>
I have one checkbox initially set to false if any user checked it, it must be set to true
this what i have tried.
<div class="control-group">
<div class="controls">
<label class="lbl">Force SSL</label>
<input type="checkbox" name="force_ssl" id="force_ssl" />
</div>
</div>
when i have dumped it getting on instead 1. in case keep this value in hidden field getting wrong data 0, on. can anyone help me out what shall i have to change in it ? Thanks
You just need to add value to your checkbox.
<input type="checkbox" name="force_ssl" id="force_ssl" value="1" />