Tutorialsplane

AngularJs Check All Uncheck All


AngularJs Check All Uncheck All : Sometimes we need functionality to check all and uncheck all checkboxes. Here in this tutorial we are going to explain how you can create this functionality in AnagularJs. You can also use our online editor to edit and run demo.


AngularJs Check All Uncheck All | Select All | Unselect All Example

Unlike jQuery you don’t need to put extra effort to check/uncheck all checkboxes in AngularJs, It is very easy and simple. Here is a simple example for check and uncheck all functionality. –

AngularJs Check All Uncheck All | Example:




 
 

  
<div ng-app="myApp">  
<div ng-controller="myController"> 
 
 <table>
        <tr>
        <td>Select All Items </td>    
        </tr>
        <tr ng-repeat="item in Items">
            <td>{{item.Name}}
                
            </td>
        </tr>
    

 

  
      





</table>
<p><a class="tryitbutton" href="http://tutorialsplane.com/runtest/try.php?trycode=angularjs-check-all-uncheck-all&post_code=code9&full=" target="_blank">Try it »</a>
</p></div>
<p>If you run the above example it will produce output something like this –</p>
<p><amp-img src="//tutorialsplane.com/wp-content/uploads/2016/09/Screenshot-from-2016-09-22-05-15-41.png" alt="AngularJs Check All Uncheck All" width="613" height="239" class="alignnone size-full wp-image-8708 amp-wp-enforced-sizes" srcset="https://www.tutorialsplane.com/wp-content/uploads/2016/09/Screenshot-from-2016-09-22-05-15-41.png 613w, https://www.tutorialsplane.com/wp-content/uploads/2016/09/Screenshot-from-2016-09-22-05-15-41-300x117.png 300w" sizes="(min-width: 600px) 600px, 100vw"></amp-img></p>
</div>