I want to restrict user to uncheck check-boxes if minimum three are unchecked. He would not be able to uncheck anymore check-boxes if any three are already unchecked.
Here is the code.
http://jsbin.com/corecetepa/1/edit
You could do something like
<input ng-change="!option.selected && permissions.headers | filter: {selected: true}).length<=3 && option.selected= true" type="checkbox"
ng-model="option.selected"
ng-checked="option.selected"/>
{{ option.title }}
OR
You could move the same logic to controller method.
Markup
ng-change="changeCheckbox(option)
Controller
$scope.changeCheckbox = function (option)
{
if(!option.selected && $scope.$eval('permissions.headers | filter: {selected: true}).length<=3'))
option.selected = false;
}
You can do like this,
<label ng-repeat="option in permissions.headers">
<input ng-click="checkPermission()" type="checkbox"
ng-model="option.selected"
ng-checked="option.selected">
{{ option.title }}
</label>
$scope.checkPermission=function(option){
var lengthTemp=($filter('filter')($scope.permissions.headers,{'selected':true})).length;
if(lengthTemp<3) {
option.selected=!option.selected;
}
};
}
$filter('filter')($scope.permissions.headers,{'selected':true})).length will filter those options in permissions.headers for which checkbox is selected.
I hope this is what you are looking for.
Related
Is there any way to shift + click to select multiple checkboxes using this directive like we have in Gmail?
Example:
Click on 1st row's checkbox.
Holding down SHIFT key.
Click on 10th row's checkbox.
Result: the first 10th rows will be selected.
Here is an example of how to do it, the selectors will need to be changed to something more specific when it is used in something with more that just the check-boxes.
It works by scanning all the inputs and seeing if it is checked, if it is it toggles a boolean that will cause each element to toggle to checked until the this matches the clicked item then breaks out of the loop as it doesnt need to check any more.
$("[type='checkbox']").click(function(evt) {
if (evt.shiftKey){
let item = $(this);
let hitfirstChecked = false;
$("#wrapper-check input").each(function(){
if($(this).is(":checked")){
hitfirstChecked = true;
}
if(hitfirstChecked){
$(this).prop('checked', true);
}
if(item.is($(this))){
return false;
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="wrapper-check">
<input type="checkbox" value="1">1
<input type="checkbox" value="2">2
<input type="checkbox" value="3">3
<input type="checkbox" value="4">4
<input type="checkbox" value="5">5
<input type="checkbox" value="6">6
<input type="checkbox" value="7">7
<input type="checkbox" value="8">8
</span>
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'}
]
});
<select ng-model="Listbox" ng-options="build for build in builds" ng-change="show(Listbox); showtable(Listbox);showummary(Listbox);"style="width: 500px" id="lbox"></select>
Here on change of option i am calling all 3 functions but i want them to be called depending on which radio button is checked.
<tr><td >
<input type="radio" checked onclick="showF();">Summary
</td>
<td >
<input type="radio" onclick="showS();">Detailed Summary
</td>
</tr>
If summary is selected then only call show and showtable otherwise call showsummary. I can put them in radio buttion tag but then change in select option won't be deteced.
You can modify your ngChange to trigger a single function, as below:
<select ng-model="Listbox" ng-options="build for build in builds" ng-change="checkShow()"style="width: 500px" id="lbox"></select>
Then you change your radio buttons:
<input type="radio" value="summary" ng-model="radioSelected">Summary
<input type="radio" value="detailedSummary" ng-model="radioSelected">Detailed Summary
Note: Don't use onclick, use ngClick if you need to trigger a click event in Angular.
Finally, in your controller you can just check what's the option selected in radio:
$scope.radioSelected = 'summary'; // Default selection
$scope.checkShow = function() {
if ($scope.radioSelected === 'summary') {
show();
showTable();
} else {
showSummary();
}
}
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.
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.