Question

我是AngularJS的新手。我在AngularJS中创建了分页。

我检查并取消选中所有功能。当我点击检查所有时，应该只考虑当前页面行复选框。但现在它选择全部
页面我不想要的行。

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
        <script src="https://code.angularjs.org/1.4.8/angular.js"></script>
        <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.0.3.js"></script>
        <link rel="stylesheet" href="style.css" />
        <script src="script.js"></script>
    </head>
    <body ng-app="myModule" ng-controller="myController">
        <input type="text" class="form-control" placeholder="Filter..." ng-model="query">
        <table>
            <tr>
                <th>
                    <input id="all" class="styled" type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>
                </th>
                <th class="col-sm-2">First Name</th>
                <th class="col-sm-2">Last Name</th>
                <th class="col-sm-4">Email Id</th>
            </tr>

            <tr ng-repeat="item in filterData = (totalItems| filter : search) | limitTo:10:10*(page-1)">
                <td><input id="member1" class="styled" type="checkbox" ng-model="item.Selected"></td>
                <td class="col-sm-2 text-center">{{item.itemName}}</td>
                <td class="col-sm-2 text-center">{{item.itemcity}}</td>
                <td class="col-sm-4 text-center">{{item.quantity}}</td>
            </tr>
        </table>
    <uib-pagination max-size="maxSize"  boundary-links="true" class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
                    ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=10></uib-pagination>
</body>


<script>
    // Code goes here
    var myModule = angular.module('myModule', ["ui.bootstrap"]);
    myModule.controller('myController', function($scope) {
    $scope.page = 1;
    $scope.totalItems = [ {itemName: "Tom", itemcity: "pune", quantity : "11"},
    {itemName: "Tim", itemcity: "dhule", quantity : "21"},
    {itemName: "Tum", itemcity: "chalis", quantity : "33"},
    {itemName: "Tam", itemcity: "akola", quantity : "54"},
    {itemName: "Tem", itemcity: "jamner", quantity : "67"},
    {itemName: "Tiem", itemcity: "nashik", quantity : "87"},
    {itemName: "Pum", itemcity: "mumbai", quantity : "98"},
    {itemName: "Pum", itemcity: "mumbai", quantity : "82"},
    {itemName: "Pum", itemcity: "mumbai", quantity : "79"},
    {itemName: "Pum", itemcity: "mumbai", quantity : "100"},
    {itemName: "Pum", itemcity: "mumbai", quantity : "51"}
    ];
    $scope.displayItems = $scope.totalItems.slice(0, 10);
    $scope.pageChanged = function() {
    var startPos = ($scope.page - 1) * 10;
    //$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);
    console.log($scope.page);
    };
    $scope.search = function (row) {
    return !!((row.itemcity.indexOf($scope.query || '') !== - 1 || row.quantity.indexOf($scope.query || '') !== - 1));
    };

      var getAllSelected = function () {
        var selectedItems = $scope.totalItems.filter(function (item) {
        return item.Selected;
        });
        return selectedItems.length === $scope.totalItems.length;
        }

        var setAllSelected = function (value) {
        angular.forEach($scope.totalItems, function (item) {
        item.Selected = value;
        });
        }

        $scope.allSelected = function (value) {
        if (value !== undefined) {
        return setAllSelected(value);
        } else {
        return getAllSelected();
        }
        }
    });


</script>

</html>

Angular仅选择当前页面中的所有复选框

0 个答案: