如何清除bootstrap 模态框中缓存

Question

打开模态框，对选择框进行勾选，但不点击确定，点击取消，模态框关闭，再次打开模态框，发现之前勾选的还在，重新刷新页面，又恢复原来的状态。
以下是我的代码

<div class="modal allocateModel" tabindex="-1" role="dialog" id="userSysAllocate">
    <div class="modal-dialog allocateDialog" role="document">
        <div class="modal-content allocateContent">
            <div class="modal-header allocateHeader">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">分配备份系统</h4>
            </div>
            <div class="modal-body allocateBody" id="allocateContent">
                <span class="selectHeader">请选择一个或多个备份系统</span>
                <div class="selectBtn">
                    <div class="forSelect">
                        <input type="checkbox" ng-model="allSelected" ng-checked="allSelected" class="checkIpt" ng-click="selectAll()" value="全选"><span class="selectEle">全选</span>
                    </div>
                    <ul>
                        <li class="roleSelect" ng-repeat="rUser in rUsers track by $index" style="float: left;">
                            <input type="checkbox" ng-disabled="rUser.creatorId == userBackupId" ng-checked="rUser.relativeState" ng-model="rUser.relativeState" name="chosed" ng-click="allChoose()" class="allCheck checkIptOne" value="{{rUser.systemPkId}}"><span class="selectEle slectRht">{{rUser.systemName}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div class="modal-footer allocateFooter">
                <button type="button" class="btn btn-default allocateCancle" data-dismiss="modal">取 消</button>
                <button type="button" class="btn btn-primary allocateConfirm" ng-click="allocateSubmit(userBackupId)">确 定</button>
            </div>
        </div>
    </div>
</div>

图片

勾选第一个选择框

点击取消按钮，再次打开模态框，第一个勾选的应该取消掉，没有消失掉。
在网上搜了解决方法，最多的是对模态框进行监控，当模态框消失后，触发事件，清除缓存。但是下面这种解决方法没有用，另外，我也尝试了给取消添加点击事件，点击取消重新向后台发送请求，但是仍是不行。

$("#userSysAllocate").on("hidden.bs.modal", function() {
  $(this).removeData("bs.modal");
});

解决方法二（不行）：
创建一个bootstrap-modal-clear.js文件，引入页面中

$(function () {
    // when the modal is closed
    $('#modal-container').on('hidden.bs.modal', function () {
        // remove the bs.modal data attribute from it
        $(this).removeData('bs.modal');
        // and empty the modal-content element
        $('#modal-container .modal-content').empty();
    });
});

Answer 1

你使用了Angular，是不是可以用Angular的思路来解决这个问题。
比如modal的html的ng-model="allSelected",改成ng-model="$data.allSelected",
每次打开modal传入的都是不同的$data。

Answer 2

通过监听模态框是否消失来触发事件hidden.bs.modal

其中"hidden.bs.modal"表示此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
链接描述

$("#userSysAllocate").on("hidden.bs.modal", function() {
  $("#userSysAllocate").removeData("bs.modal");
  var objSelect = document.getElementsByClassName('allCheck'),
    len = objSelect.length;
  for(var i=0; i<len; i++) {
    objSelect[i].checked = false;
  }
  $scope.allSelected = false;
});

上述解决方案还有问题

Answer 3

用ng的话，每次新打开或关闭模态框，可以试下重置 rUsers 这条数据。

Answer 4

用angular,为甚还用jq去写,