我是AngularJs的新手。我有下面的代码，我有一个表，并使用Angularjs呈现表的内容。我在标题上有一个selectAll复选框，检查我需要在表格中选中所有复选框。由于我可以排序，过滤内容，我不明白如何选择表的所有复选框。能告诉我如何实现这个实现吗？
还为此代码添加了一个plunker
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Hosts {{ currentPage }}</h5>
<!--<button class="btn btn-sm btn-warning pad-btn" type="submit" ng-click="reset()" style="float:right;">Refresh<i class="fa fa-history"></i></button>-->
</div>
<div class="ibox-content">
<div class="row">
<div class="col-sm-4 m-b-xs">
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-sm btn-white"> <input type="radio" id="option1" name="options" ng-model="pageSize" value="10">10</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option2" name="options" ng-model="pageSize" value="25">25</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option3" name="options" ng-model="pageSize" value="50">50</label>
<label class="btn btn-sm btn-white"> <input type="radio" id="option4" name="options" ng-model="pageSize" value="100">100</label>
</div>
</div>
<div class="col-sm-4 m-b-xs">
<div data-toggle="buttons" class="btn-group">
<label class="btn btn-md btn-primary"> <input type="radio" id="refresh" name="options" ng-model="action" value="refresh" ng-change="handleRefresh()">Refresh</label>
<label class="btn btn-md btn-info"> <input type="radio" id="reset" name="options" ng-model="action" value="reset" ng-change="handleRefresh()">Reset</label>
<label class="btn btn-md btn-warning"> <input type="radio" id="export" name="options" ng-model="action" value="export" ng-change="handleRefresh()">Export</label>
</div>
</div>
<div class="col-sm-3 pull-right">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search Host" ng-model="name">
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<td><input type="checkbox" ng-change="updateHosts()" ng-model="all_hosts"/></td>
<td>
<a href="#" ng-click="sortType = 'name'; sortReverse = !sortReverse">
Hostname
<span ng-show="sortType == 'name' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'name' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'application'; sortReverse = !sortReverse">
Application
<span ng-show="sortType == 'application' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'application' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'environment'; sortReverse = !sortReverse">
Environment
<span ng-show="sortType == 'environment' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'environment' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'tier'; sortReverse = !sortReverse">
Tier
<span ng-show="sortType == 'tier' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'tier' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'changes_summary'; sortReverse = !sortReverse">
Changes
<span ng-show="sortType == 'changes_summary' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'changes_summary' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
<td>
<a href="#" ng-click="sortType = 'change_last_checked'; sortReverse = !sortReverse">
Last Updated
<span ng-show="sortType == 'change_last_checked' && !sortReverse" class="fa fa-caret-down"></span>
<span ng-show="sortType == 'change_last_checked' && sortReverse" class="fa fa-caret-up"></span>
</a>
</td>
</tr>
</thead>
<tbody>
<tr dir-paginate="host in newHosts | orderBy:sortType:sortReverse | filter:name | itemsPerPage:pageSize
" pagination-id="host" current-page="currentPage">
<td><input type="checkbox" ng-change="update(host.id)" ng-model="host_id"/></td>
<td>{{host.name}}</td>
<td>{{host.application}}</td>
<td>{{host.environment}}</td>
<td>{{host.tier}}</td>
<td><span class="label-danger"><a class="linkref" href="/details/{{host.id}}">{{host.changes_summary}}</a></span></td>
<td>{{host.changes_last_checked | date:"MM/dd/yyyy"}}</td>
</tr>
</tbody>
</table>
<div class="range-label">Displaying</div>
<dir-pagination-controls pagination-id="host" on-page-change="pageChangeHandler(newPageNumber)"></dir-pagination-controls>
</div>
</div>
</div>
</div>
</div>
由于
答案 0 :(得分：1)
试试这个：
在 thead 上更改您的复选框：
<td><input type="checkbox" ng-change="updateHosts()" ng-model="allHosts"/></td>
在 tbody 上更改此复选框：
<td><input type="checkbox" ng-model="host.checked"/></td>
为此更改$scope.newHosts：
$scope.newHosts=[
{
"id": 1,
"name": "Pradeep",
"application": "Angularjs",
"checked": false
},
{
"id": 2,
"name": "Praveen",
"application": "NodeJs",
"checked": false
},
{
"id": 3,
"name": "Raj",
"application": "Java",
"checked": false
},
{
"id": 4,
"name": "Ram",
"application": "Dontnet",
"checked": false
}
];
最后，添加此方法：
$scope.updateHosts = function (){
$scope.newHosts.forEach(function(host){
host.checked = $scope.allHosts;
});
};
Aditional：摆脱你的更新方法。
现在，当您点击每个复选框时，变量checked将在$scope.newHosts内更改。
如果您只想查看已过滤的内容，请尝试以下操作：
<tr dir-paginate="host in filteredHosts = ( newHosts | orderBy:sortType:sortReverse | filter:name | itemsPerPage:pageSize)"
pagination-id="host" current-page="currentPage">
答案 1 :(得分：0)
尝试使用名为md-data-table的模块。看看demo。