Bootstrap +angualrjs (Select all/Reverse selection)

650) this.width=650; "src=" Http://s3.51cto.com/wyfs02/M02/5C/09/wKiom1UZG9CRq320AAF85Z3Zw6o085.jpg "title=" Sogou 20150330174915.png "alt=" Wkiom1uzg9crq320aaf85z3zw6o085.jpg "/>

<! DOCTYPE html>

<meta charset= "UTF-8" >

<title>insert title here</title>

<link rel= "stylesheet" href= "./css/bootstrap.min.css" >

<script type= "Text/javascript" src= "./js/jquery.js" ></script>

<script type= "Text/javascript" src= "./js/angular.min.js" ></script>

<script type= "Text/javascript" >

var app = Angular.module ("myApp", []);

App

. Controller (

"Usercontroller",

function ($scope) {

$scope. Edituser = function (ID) {

alert (ID);

};

$scope. Deluser = function (ID) {

alert (ID);

if ($scope. id! = "") {

Alert ("You're sure to empty the content!") ");

}

};

$scope. SelectAll = function () {

if ($ ("#SelectAll"). attr ("checked")) {

$ (": CheckBox"). attr ("Checked", true);

} else {

$ (": CheckBox"). attr ("checked", false);

}

};

$scope. Setselectall = function () {

SelectAll unchecked when a child check box is not selected

if (!$ ("#subcheck"). Checked) {

$ ("#SelectAll"). attr ("checked", false);

}

var chsub = $ ("input[type= ' checkbox '][id= ' Subcheck ']"). Length; Get the number of Subcheck

var checkedsub = $ ("input[type= ' checkbox '][id= ' Subcheck ']:checked"). Length; Gets the number of selected Subcheck

if (checkedsub = = chsub) {

$ ("#SelectAll"). attr ("Checked", true);

}

};

$scope. Delselectall = function () {

Alert ("www");

};

$scope. Users = [{

Id:1,

Name: ' SS ',

Sex: ' Male ',

Post: ' manager ',

phone:182181209

}, {

Id:2,

Name: ' DD ',

Sex: ' Woman ',

Post: ' Boss ',

phone:182181209

}, {

Id:3,

Name: ' FF ',

Sex: ' Male ',

Post: ' Employees ',

phone:182181209

},{

Id:4,

Name: ' FF ',

Sex: ' Male ',

Post: ' Employees ',

phone:182181209

}

];

});

</script>

<body ng-app= "myApp" ng-controller= "Usercontroller" >

<div style= "Text-align:center" >

<table style= "margin:0 auto; width:80% "class=" Table table-striped ">

<thead>

<tr>

<th width= "10%" ><input type= "checkbox" id= "SelectAll"

Value= "Select All" ng-click= "SelectAll ();/> Select all/Reverse </th>

<th width= "10%" > Name </th>

<th width= "10%" > Sex </th>

<th width= "20%" > Jobs </th>

<th width= "15%" > Phone </th>

<th width= "20%" > Edit </th>

<th width= "5%" ><button class= "btn btn-success"

Ng-click= "Delselectall ()" > Add Users </button></th>

</tr>

</thead>

<tbody>

<tr align= "left" ng-repeat= "user in Users" >

<td><input type= "checkbox" id= "Subcheck"

Ng-click= "Setselectall ();"/></td>

<td>{{user.name}}</td>

<td>{{user.sex}}</td>

<td>{{user.post}}</td>

<td>{{user.phone}}</td>

<td>

<button class= "btn btn-success" ng-click= "Edituser (user.id)" >

<span class= "Glyphicon glyphicon-pencil" > Edit </span>

</button>

<button class= "btn btn-success" ng-click= "Deluser (user.id)" >

<span class= "Glyphicon glyphicon-pencil" > Delete </span>

</button>

</td>

<td></td>

</tr>

<tr align= "Left" >

<td>

<button class= "btn btn-success" ng-click= "Delselectall ()" > Delete selected Items </button>

</td>

</tr>

</tbody>

</table>

</div>

</body>

Bootstrap +angualrjs (Select all/Reverse selection)