Angular Bind Checkboxes list to a unique ng-model Array
In this post we will show you how to Angular Bind Checkboxes list to a unique ng-model Array and how to use Angular Bind Checkboxes list for unique ng-model Array.
In the event that you are utilized to control HTML frames, you presumably realize that each checkbox is a different variable (or possibly a ngModel with AngularJS). Once in a while, it could be usefull to control all these checkboxes as a one of a kind cluster. angular.checkboxes module gives you a chance to transform your rundown of checkboxes into a remarkable goal cluster, giving :
- no secluded degree for each
checkbox:the mandate does not make new kid scope. - a
mtCheckboxController:inside controller can be infused to other directives. two-way official:control the goal cluster will check/uncheck the checkboxes AND check/uncheck the checkboxes will adjust the goal array.
Installation for Angular Bind Checkboxes list to a unique ng-model Array
// Installation of angular checkboxes npm i angular-checkboxes --save
Simple Example for Angular Bind Checkboxes list to a unique ng-model Array
<h2>Angular Bind Checkboxes list to a unique ng-model Array</h2> <form> <div class="inp-div" mt-to="setmyUniqueArray"> <input type="checkbox" class="inp-checkbox" mt-checkbox name="setvalue1" /> Value 1 <br/> <input type="checkbox" class="inp-checkbox" mt-checkbox name="setvalue2" /> Value 2 <br/> <input type="checkbox" class="inp-checkbox" mt-checkbox name="setvalue3" /> Value 3 <br/> </div> </form>
Let’s check Value 1 and Value 2, and you will get (in the current scope) for Angular Bind Checkboxes list to a unique ng-model Array:
setmyUniqueArray= [ "setvalue1", "setvalue2" ];
Let’s push value3 to setmyUniqueArray now, and you will check the Value 3 checkbox.
How about we push value3 to setmyUniqueArray now, and you will check the Value 3 checkbox.
Pretty cool for Angular Bind Checkboxes list to a unique ng-model Array
/!\ Do not neglect to $apply() the extension changes while controlling goal cluster!
Imagine a scenario in which the checkbox additionally has a ngModel.
Couldn’t care less about that, the module takes it in control. Simply utilize them on the off chance that you require, they will be refreshed with the stream: on the off chance that you include or expel an incentive from the goal exhibit, the checkbox ngModel (a boolean) will be exchanged.
The main thing to know is : amid the initialisation stage, if the ngModel condition of the checkbox contrasts from its state in the goal exhibit, the ngModel will be overriden. So if the checkbox is checked, yet the esteem is not in the cluster : the checkbox will be unchecked.
A conceivable improvement could be to include an alternative (in the Provider or as a property) to compel it to work the other way and give the checkbox ngModel the need on the exhibit.
You also like Angular Gauge chart and Angularjs Image Gallery and Angularjs pie chart and Vuejs WYSIWYG Editor and angular 2 gauge chart