0

我有一个带有多组复选框的现有 MVC 4 应用程序，我需要检测用户何时进行了更改，即选中或取消选中复选框。如果用户进行了更改并且他们尝试离开页面，我需要提示他们保存更改。我只是在学习 AngularJS，但我想我可以用它来检测复选框状态何时发生变化，还可以使用角度路由来检测用户何时离开页面。

我的代码基于这里的答案。由于视图已经由 MVC 呈现，我无法使用 REST 服务和角度来填充模型和视图。

在视图中呈现的 HTML

<div id="userPermissions" class="userWrapper" ng-app="myApp.User">      
<div id="actionCategories" class="section" ng-controller="UserCtrl">
    <div class="actionGroupBody">
        <div class="actionGroupAction">
             <input type="checkbox" value="Create new users" 
            id="action-f9ae022b-5a53-4824-8a79-f7bbac844b11" 
            data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"  
            ng-checked="isSelected('f9ae022b-5a53-4824-8a79-f7bbac844b11')"
            ng-click="updateSelection($event,'f9ae022b-5a53-4824-8a79-f7bbac844b11')"/>Create new users 
         </div>
         <div class="actionGroupAction">
            <input type="checkbox" value="Edit users" 
            id="action-5525d5e7-e1dd-4ec3-9b1d-3be406d0338b" 
            data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"  
            ng-checked="isSelected('5525d5e7-e1dd-4ec3-9b1d-3be406d0338b')"
            ng-click="updateSelection($event,'5525d5e7-e1dd-4ec3-9b1d-3be406d0338b')"/>Edit users
        </div>
         <div class="actionGroupAction">
            <input type="checkbox" value="Edit personal account" 
            id="action-9967c1c2-c781-432b-96df-224da760bfb6" 
            data-action-category="8aefed6e-b76c-453f-94eb-d81d2eb284f9"  
            ng-checked="isSelected('9967c1c2-c781-432b-96df-224da760bfb6')"
            ng-click="updateSelection($event,'9967c1c2-c781-432b-96df-224da760bfb6')"/>Edit personal account
        </div>
    </div>
<div class="caption">
            <label class="actionGroupCaption">Store</label> <span class="actionCategorySelectAll"><input type="checkbox" value="select all Store" id="7bace6c1-4820-46c2-b463-3dad026991f2" data-action-category="selectall"/>All</span>
        </div>
        <div class="actionGroupBody">
            <div class="actionGroupAction">
                <input type="checkbox" value="Access home page" 
                id="action-fba7e381-4ed8-47ce-8e85-b5133c9ba9f7" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('fba7e381-4ed8-47ce-8e85-b5133c9ba9f7')"
                ng-click="updateSelection($event,'fba7e381-4ed8-47ce-8e85-b5133c9ba9f7')"/>Access home page
            </div>
            <div class="actionGroupAction">
                <input type="checkbox" value="Edit settings" 
                id="action-2d02b77b-14a4-4136-a09f-fd51eecd2dbe" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('2d02b77b-14a4-4136-a09f-fd51eecd2dbe')"
                ng-click="updateSelection($event,'2d02b77b-14a4-4136-a09f-fd51eecd2dbe')"/>Edit settings
            </div>
            <div class="actionGroupAction">
                <input type="checkbox" value="Edit products" 
                id="action-f42f933c-a2b8-42e8-af4b-d52f90f58ddb" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('f42f933c-a2b8-42e8-af4b-d52f90f58ddb')"
                ng-click="updateSelection($event,'f42f933c-a2b8-42e8-af4b-d52f90f58ddb')"/>Edit products
            </div>
            <div class="actionGroupAction">
                <input type="checkbox" value="Edit orders" 
                id="action-92ed258b-c954-46e4-b5c9-a89fdb5c54d9" 
                data-action-category="7bace6c1-4820-46c2-b463-3dad026991f2"  
                ng-checked="isSelected('92ed258b-c954-46e4-b5c9-a89fdb5c54d9')"
                ng-click="updateSelection($event,'92ed258b-c954-46e4-b5c9-a89fdb5c54d9')"/>Edit orders
            </div>
        </div>
</div>
</div>

这是角度代码

 var app = angular.module('myApp.User', []);

app.controller('UserCtrl', function ($scope) {
    $scope.entities = [{ //how to populate with checkboxes state from view? factory maybe similar to below??? // }];

    $scope.selected = [];
    var updateSelected = function (action, id) {
        if (action == 'add' & $scope.selected.indexOf(id) == -1)
            $scope.selected.push(id);
        if (action == 'remove' && $scope.selected.indexOf(id) != -1)
            $scope.selected.splice($scope.selected.indexOf(id), 1);
    };

    $scope.updateSelection = function ($event, id) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        updateSelected(action, id);
    };

    $scope.selectAll = function ($event) {
        var checkbox = $event.target;
        var action = (checkbox.checked ? 'add' : 'remove');
        for (var i = 0; i < $scope.entities.length; i++) {
            var entity = $scope.entities[i];
            updateSelected(action, entity.id);
        }
    };

    $scope.getSelectedClass = function (entity) {
        return $scope.isSelected(entity.id) ? 'selected' : '';
    };

    $scope.isSelected = function (id) {
        return $scope.selected.indexOf(id) >= 0;
    };

    $scope.isSelectedAll = function () {
        return $scope.selected.length === $scope.entities.length;
    };
});

    app.factory('UserDataService', function () {

    var service = {}

    service.getData = function () {
        var actions = $("input[id^=action-]");

        return actions;
    }

    return service;    
});

每当我单击复选框时，控制器中都不会触发 $scope 函数（.updateSelection、.isSelected 等）。

4

0 回答 0