Question

我创建了测试Spring Boot + AngularJS应用程序来测试复选框：

HTML：

... <thead>
                        <tr>
                            <th><input type="checkbox" ng-model="isAllSelected"
                                ng-click="selectAll()"></th>
                            <th>Lp.</th>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Parent Id</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="test in tests">
                            <td><input type="checkbox" ng-model="test.checked"
                                ng-change="optionSelected()" /></td>
                            <td>{{$index+1}}.</td>
                            <td>{{test.id}}</td>
                            <td>{{test.name}}</td>
                            <td>{{test.parentId}}...

test_controller.js：

(function(angular) {
    var AppTestController = function($scope, Test) {

        var vm = this;

        vm.tests = [];

        vm.loadAll = loadAll;

        loadAll();



        function loadAll() {
            Test.query(function(result) {
                vm.tests = result;
            });
        }



        vm.selectAll = function() {
            var toggleStatus = vm.isAllSelected;
            angular.forEach(vm.tests, function(itm) {
                itm.checked = toggleStatus;
            });

        }

        vm.optionSelected = function() {
            vm.isAllSelected = vm.tests
                    .every(function(itm) {
                        return itm.checked;
                    })
        }


    };

    AppTestController.$inject = [ '$scope', 'Test' ];
    angular.module("myApp.test_controller").controller(
            "AppTestController", AppTestController);
}(angular));

这适用于我作为spring Boot应用程序，但是当我在JHipster中执行相同操作时，它不起作用。我怎样才能让它在JHipster中工作？

Answer 1

这是我目前使用的，它有效！：

html的

<thead>
    <tr jh-sort="vm.predicate" ascending="vm.reverse" callback="vm.transition()">
        <!--th jh-sort-by="id"><span data-translate="global.field.id">ID</span> <span class="glyphicon glyphicon-sort"></span></th-->
        <th><input type="checkbox" icheck ng-change="vm.selectAll()" ng-model="vm.checkAll[vm.page]"></th>
        <th jh-sort-by="id"><span data-translate="global.field.id">ID</span></th>
        ---
    </tr>
</thead>
<tbody>
    <tr ng-repeat="school in vm.schools track by school.id">
        <td><input type="checkbox" icheck ng-model="vm.checkboxes[school.id]" ng-change="vm.select(school)"/></td>
        <td>{{($index + 1) + (vm.page - 1) * vm.itemsPerPage}}</td>
        ...
    </tr>
</tbody>

的.js

vm.checkAll = [];
var map = {};
vm.checkboxes = [];
vm.selectedItems = [];

vm.selectAll = selectAll;
vm.select = select;

function selectAll () {
    var value = vm.checkAll[vm.page];
    angular.forEach(vm.schools, function(item) {
        if (angular.isDefined(item.id)) {
            if(vm.checkboxes[item.id] != value) {
                vm.checkboxes[item.id] = value;
                vm.select(item);
            }
        }
   });
};

function select (item) {
    var value = vm.checkboxes[item.id];

    if(value) {
        vm.selectedItems.push(item);
        if(map[vm.page] == null) map[vm.page] = 1;
        else map[vm.page] = map[vm.page] + 1;
        if(map[vm.page] == vm.schools.length) {
            vm.checkAll[vm.page] = true;
        }
    } else {
        vm.selectedItems.splice(item, 1);
        if(map[vm.page] == null) map[vm.page] = 0;
        else map[vm.page] = map[vm.page] - 1;
        if(map[vm.page] < vm.schools.length) {
            vm.checkAll[vm.page] = false;
        }
    }
};

如何选择JHipster中的所有复选框

1 个答案: