I have an array of Book-objects, each with the boolean property Favorite. Only one of the books has Favorite set to true.
I'm displaying these books using ng-repeat, and I want to be able to set the favorite book with radio buttons. However, even though the correct radio button is selected upon page load, the model doesn't update the boolean values when I select a different radio button.
Here's my code:
<ul>
<li ng-repeat="book in vm.Books">
{{book.Name}}
<input name="book" type="radio" ng-model="book.Favorite" ng-value="book.Favorite" />
</li>
<ul>
How do I update the model with the correct Favorite-value based on the checked radio button?
The following is close, but will not set book.Favorite to false when you pick another one (which I assume you want?):
<li ng-repeat="book in vm.Books">
{{book.Name}}
<input name="book" type="radio" ng-model="book.Favorite" ng-value="true">
</li>
I would just go this way instead:
<li ng-repeat="book in vm.Books">
{{book.Name}}
<input type="radio" ng-click="vm.setFavorite(book)" ng-checked="book.Favorite">
</li>
And:
vm.setFavorite = function(book) {
vm.Books.forEach(function(b) {
b.Favorite = book === b;
});
};
Demo: http://plnkr.co/edit/UKGQW1dd8M5UiEbUCxWd?p=preview
Related
i use ng-repeat as i populate the names
this is my view
<div ng-controller="user_tagging_ctl" ng-init="user_type='<?php if(isset($user_type))echo $user_type; else echo'all'; ?>';">
<input type="text" class="form-control" ng-model="user_srch" maxlength="35" placeholder="Project Manager" required>
<span class="user_tagging_container">
<ul>
<li ng-repeat="x in data | filter:user_srch | orderBy:['status','x.user_lname']" data-id="{{x.user_id}}">
<input type="checkbox" name="pm-group">
{{x.user_fname + ' ' + x.user_lname}}
</li>
</ul>
</span>
</div>
everytime i search using my textbox the checkbox button resets to false.
example: i check the name i want then try to search another name then if i clear the textbox, all checkbox are now false/not checked.
how can i preserved the checked ones and make them at the orders first those are checked?
Bind to ng-model:
<input type="checkbox" name="pm-group" ng-model="x.selected">
See how to order
I have a list of data, this data is filtered by a dropdown menu.
The problem is, i want the filtering to be triggered only on a button click, not on the dropdown change.
<select ng-model="annee" ng-options="annee.titre for annee in annees track by annee.id">
</select>
<input type="submit" name="submit" value="Filtrer">
<ul>
<li ng-repeat="x in accueils | filter:annee" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>
</ul>
Here is a working example :
http://plnkr.co/edit/MbfrhdKfbTObybsQvxrR?p=preview
I want the filter to be triggered on clicking on the "filter" button
Is it possible ?
Thanks a lot!
Note that your filter code here doesn't match your Plunker; it's filter:{annee:annee.id} in the Plunker.
You want to decouple the ng-repeat from the ng-model. One way to do this is to filter based on a new property and update that property only when the Filter button is clicked.
In your HTML:
Add a <form> element and set ng-submit to call submit() when the Filter button is pressed:
<form ng-app="myApp" ng-controller="customersCtrl" ng-submit="submit()">
Change the ng-repeat filter to use a new property instead of the property used by the <select> element's ng-model:
<li ng-repeat="x in accueils | filter:{annee:currentAnnee.id}">
In your controller:
Create the new property initialized with an invalid id:
$scope.currentAnnee = {
"id": 0
};
Create a submit() function that sets the new property from the <select> element's ng-model:
$scope.submit = function() {
$scope.currentAnnee = $scope.annee;
};
See this Plunker for a complete example.
As pointed by #msmolens, there were some differences in your plunker and the code you posted here. Secondly, the two arrays that you have used, have nothing in common so for demonstration purposes i have changed the structure of the second array that will be used as filter.
To start with, decouple your Array filter from the model value of the select drop down.
<select ng-model="annee" ng-options="annee.date for annee in annees track by annee.id">
</select>
<input type="submit" name="submit" value="Filtrer" ng-click="filter()">
<ul>
<li ng-repeat="x in accueils | filter:filterExpr" >
{{x.titre}}
<div ng-bind-html="x.description | to_trusted"></div>
{{x.date}}
{{x.cout}} $
{{x.participants}} participants
</li>
</ul>
As visible in the code, we have a model variable for the filter expression in the ng-repeat.
We then initialize the filter expression with a blank value.
$scope.filterExpr = {"date" : ''};
There after, you just need to capture ng-click of the filter button and modify the variable being used as a filter.
$scope.filter = function() {
$scope.filterExpr = {"date" : $scope.annee.date};
};
You can find the updated plunker here.
If we have multiple checkbox in ng-repeat and i want to determine in which checkbox is checked or unchecked in controller's action. so i was not able to do it.
<ul class="list-month" id="divMonths">
<li ng-repeat="m in model.Months">
<div>
<input type="checkbox" id="{{m.Month}}" ng-model="$index" class="left" ng-change="onClickMonth($index)" />
</div>
</li>
</ul>
$scope.onClickMonth = function (id) {
if (id=== true) {
alert("true");
}
else {
alert("false");
}
};>
You could also just use the multiple option.
<select multiple="multiple" ng-model="value" ng-options="m in model.Months"> </select>
value will then be an array that is filled as soon as a checkboxed is selected.
The problem I'm facing, as outlined in the code, is that I can't seem to find out how to bind the second checkboxes (created with ng-repeat) to some model which I would then be able to use further down the code (showing/hiding yet another set of options). Also, I managed to show the additional number of inputs based on the count parameter in the $scope.availableOptions by using the $scope.getItterator function, but now I don't see how would I access the values of these checkboxes? I know I have to somehow use the option "ng-model" but am failing to do so, so any help appreciated.
My code is here, but am showing it here too:
html:
<div ng-controller='MyCtrl'>
Show additional options <input type="checkbox" ng-model="additionalOptions">
<div ng-show="additionalOptions">
<ul>
<li ng-repeat="option in availableOptions">
<label class="checkbox" for="opt_{{option.id}}">
<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" />
{{option.name}}
<ul ng-show="if the upper checkbox is clicked">
<li>
<input type="text" ng-repeat="i in getItterator(option.count)" ng-model="SOME_VALUE_TO_BE_USED_BELOW"/>
Output the value based on what's entered above in the textboxes (SOME_VALUE_TO_BE_USED_BELOW)
</li>
</ul>
</label>
</li>
</ul>
</div>
</div>
and my js:
function MyCtrl($scope) {
$scope.availableOptions = [{"id":"1","name":"easy","count":"2"},{"id":"2","name":"medium","count":"3"},{"id":"3","name":"hard","count":"2"}];
$scope.getItterator=function(n){
var a = new Array();
for(var i=1; i <= n; i++)
a.push(i);
return a;
};
}
Try ng-model="option.checked":
<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" ng-model="option.checked"/>
And then you can access this property further below like this:
<ul ng-show="option.checked">
DEMO
If you need to also reference the text box inputs. You create a new property (values) on the option. Like this:
{"id":"1","name":"easy","count":"2",values:[]}
Html:
<div ng-repeat="i in getItterator(option.count)">
<input type="text" ng-model="option.values[$index]"/>
{{option.values[$index]}}
</div>
DEMO
Use this:
<input type="checkbox" name="opt_{{option.id}}" id="opt_{{option.}}" ng-model="option.clicked"/>
{{option.name}}
<ul ng-show="option.clicked">
Basically, you are saying that the top checkbox should store its value in a model for each option option.clicked. And then only showing the information based on the scope item.
Updated Fiddle:
http://jsfiddle.net/CkHhJ/26/
UPDATE:
Here is another updated fiddle to answer your questions second part: http://jsfiddle.net/CkHhJ/27/
The difficulties you were having is likely because you are trying to build dynamic input models. Just bear in mind that you need to use an object for the dynamic values (not a plain string, eg: option.answers[$index].value and not just option.answers[$index]. See: AngularJS: Updating an input with a dynamic ng-model blurs on each key press
I have a list with checkbox items in it, On selecting the checkbox I want to add a class to the parent li. How can I achieve this.
I am new to Angular.
<ul>
<li><input type="checkbox" name="fruits[]" value="1">Apple</li>
<li class="active"><input type="checkbox" name="fruits[]" value="2" checked>Orange</li>
<li><input type="checkbox" name="fruits[]" value="3">Pear</li>
</ul>
On selecting the checkbox I want to add the class active to the parent li
You can do this with ng-class:
<ul>
<li ng-class="{active: orange}"><input type="checkbox" ng-model="orange" name="fruits[]" value="2" checked>Orange</li>
</ul>
The {active: orange} is saying, "only add the active class if orange is truthy."
ng-model two-way binds the value of the checkbox. This gives you a variable orange to use inside the angular context.