Bootstrap模态框执行JS验证函数后自动关闭，需保持打开状态求助

我一眼就发现问题所在啦——你的「Done」按钮同时绑定了data-dismiss="modal"和ng-click="validate(infoWithStatus)"，这个data-dismiss是Bootstrap的原生属性，点击按钮时会立刻触发模态框关闭，和你的验证函数是同步执行的，所以不管验证结果如何，模态框都会被关掉。

要实现「验证通过才关闭，不通过就保持打开」的效果，只需要两步调整：

1. 移除按钮上的data-dismiss="modal"属性 #

把原来的Done按钮代码改成这样，让按钮不再自动触发模态框关闭：

<button type="button" class="btn btn-primary waves-effect waves-light" ng-click="validate(infoWithStatus)">Done</button>

2. 在validate函数中手动控制模态框的关闭 #

修改你的Angular控制器里的validate函数，根据验证结果决定是否关闭模态框：

$scope.validate = function(infoWithStatus) {
    // 这里编写你的验证逻辑，比如检查选中项是否完成必要选择
    let isValidationPassed = true;

    // 举个示例：遍历所有条目，检查选中的SPOC是否都选择了角色
    infoWithStatus.forEach(item => {
        if (item.checked && !item.selectedRole) {
            isValidationPassed = false;
            // 这里可以给用户提示，比如用Angular的消息组件或者原生alert
            alert('请为选中的SPOC选择角色！');
        }
    });

    // 验证通过时，手动调用Bootstrap方法关闭模态框
    if (isValidationPassed) {
        $('#responsive-modal3').modal('hide');
        // 这里可以添加验证通过后的后续逻辑，比如提交数据等
    }

    // 验证不通过时，无需额外操作，模态框会保持打开状态
};

这样修改后，点击Done按钮会先执行你的验证逻辑，只有当验证完全通过时，模态框才会关闭；如果验证失败，模态框会继续留在页面上，方便用户修正内容。

内容的提问来源于stack exchange，提问作者Nishant Singh