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.
Related
The below thing is taking too much time than expected. Been through top stack solutions and somehow got the below thing--
WHAT IS THE SCENERIO
I have an ng-repeat div with dropdown.
The drop down contains values and based on selection of those values a div will be shown. What I managed is div is shown. But when I choose another item the previous item div gets hidden.
Below are the screen shot and my code
As it can be seen that when I select the first item it shows the textbox div. But when I select the next item the first gets hidden. There are essentially two values -- ALL, Fixed. When All selected nothing will be shown and when Fixed is selected the div for that particular item will be shown.
HTML code
<div class="tst text-success" ng-repeat="(parentIndex, catList) in categoryArray">
<div class="col-md-3">
{{catList.categoryName}}
</div>
<div class="col-md-4">
<select class="form-control m-b" ng-model="catObj.cats" ng-change="changeOption(catObj,parentIndex)">
<option value="All">All</option>
<option value="fixed">Fixed No. Of Records</option>
<option value="perfixed">% od Fixed</option>
</select>
</div>
<div class="col-md-3 noPad" ng-if="isShowing==parentIndex">
<input type="text" class="form-control form-control-small" placeholder="Set Number" />
</div>
</div>
CONTROLLER
$scope.changeOption = function(obVal,index) {
console.log(obVal);
console.log(index);
if(obVal.cats == "All") {
//$scope.tbx = 0;
}
else {
$scope.isShowing = index;
}
}
Help would be appreciated
Thanks
You're using a single boolean $scope variable, isShowing, to control the visibility of several divs. That can't possibly work.
You should
have an array of objects, each having a selectedOption field.
use ng-model in your select box to set the selectedOption of the object you're editing.
use the value of the object's selectedOption to know if the additional input should be visible for that object.
Example:
<div ng-repeat="obj in objects">
{{ obj.name }}
<select name="op" ng-model="obj.selectedOption" ng-options="option.value as option.value for option in options"></select>
<input ng-if="obj.selectedOption !== 'All'" />
</div>
app.controller('MainCtrl', function($scope) {
$scope.options = [
{value: 'All'},
{value: 'Fixed'}
];
$scope.objects = [
{name: 'Twitter', selectedOption: 'All'},
{name: 'News', selectedOption: 'Fixed'}
]
});
I have a page that will hide/show additional elements when an option is selected:
<div ng-app>
<div ng-controller="ctrl">
opt: <select ng-model="model.opt" ng-options="item.id as item.text for item in model.opts"></select>
<br/> <span ng-show="model.opt > 1">
alt: <input type="checkbox" ng-model="model.alt" />
</span>
<div> <pre>{{ model | json }}</pre>
</div>
</div>
</div>
http://jsfiddle.net/v7wsdj74/
How would I setup to get notification when the "ng-hide" is evaluated so that the model fields being hidden can be set back to some default values (in this case null)?
Thanks
Perhaps something like this?
scope.$watch('myParameter', (value) => {
// if myParameter is false set it to null?
}
What you can do, is reset the model on changes:
<select ng-model="..." ng-options="..." ng-change="model.alt = null"></select>
https://jsfiddle.net/bfrola/wzpha8c3/
You can also define a more complex reset function and use ng-change="reset()". Hope this helps.
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
I have the array of checkboxes from which I want to select at least one checkbox and want to display the validation error
How can I do that? Here is my code
<div class="form-group" ng-class="{ 'has-error' : submitted && form.field.$invalid }">
<div class="col-md-12"><label for="field" >Select at leat one</label></div>
<div class="col-md-2" data-ng-repeat="i in [1,2,3,4]">
<label><input type="checkbox" name="field[$index]" value="{{i}}" data-ng-model="form.field[$index]" required/>Choice {{i+1}}</label>
</div>
<div ng-show="submitted && form.field.$invalid" class="help-block">
<p ng-show="form.field.$error.required">Please select at least one choice<p>
</div>
</div>
</div>
You can use native javascript functions to iterate over your array. First that come in mind are Array.prototype.some() and Array.prototype.filter().
With some, you can determine if one item in your array validates true and with filter you can find all the elements that pass a custom expression and check if the newly created array has a certain length.
E.g.:
var atleastOne = this.form.field.some(function(element) {
return element;
});
if(atleastOne) {
window.alert("validated with some");
}
var filtered = this.form.field.filter(function(element) {
if(element) { return element; }
});
if(filtered.length > 0) {
window.alert('validated with filter');
}
You can flag the variables that show the errors based on the results of your validation. A working demo can be found here.
You can create your checkbox list object array properly then bind it. Please find the demo
<div ng-controller="ChckbxsCtrl">
<div ng-repeat="chk in items">
<div style="width:500px;height:100px;border:1px solid #000;">
<B>{{chk.group}}</B><br>
<label ng-repeat="vale in chk.values">
<input type="checkbox" ng-model="vale.val" />
{{vale.label}}</label>
</div>
<span ng-show="chk.isValid">Select at least one option from {{chk.group}}</span>
</br> </div>
</br>
Using AngularJS I have a list of selected option and one additional "New" option. What I am trying to do is, when "New" option is chosen it will show a text-box to add a new value.
<select ng-model="group.name" ng-options="bl.Name for bl in Groups" >
<option value="VALUE FROM TEXT BOX">New</option>
</select>
<div class="col-md-4" ng-show="WHEN NEW OPTION IS Chosen ">
<input class="text-box" type="text" name="NewValue" ng-model="group.name" />
</div>
You can try like this
Working Demo
<div ng-app='myApp' ng-controller="ArrayController">
<select ng-model="group.name" ng-options="Group.Name for Group in Groups"></select>
<div class="col-md-4" ng-show="group.name.Value == 'new'">
<input class="text-box" type="text" name="NewValue" ng-model="newValue" />
<button ng-click="add(newValue)">Add</button>
</div>
</div>
Just watch for the selected item change:
$scope.displayDiv = false;
$scope.newval = 'newval';
$scope.$watch('group.name', function(newval, oldval) {
if (newval == $scope.newval) {
$scope.displayDiv = true;
}
}
and for the HTML :
<div class="col-md-4" ng-show="displayDiv">
Here's a working example.
First we set up our options and input.
<select ng-model="curopt"
ng-options="option.name for option in options">
</select>
<input type="text" ng-model="newopt"
ng-show="curopt.name == 'New'"
ng-keypress="newOption($event)">
The ng-show option for our input is tied to the name of the currently selected option. We also add an ng-keypress directive to allow us to handle the enter key being pressed.
Now to the controller...
$scope.newOption = function(event) {
if (event.which == 13) {
$scope.options.push({ name : $scope.newopt, value : $scope.newopt });
$scope.newopt = '';
}
}
Because our select input options is tied to the $scope.options we can simply append our text inputs value to the array and angular will handle updating for us due to data binding.