草庐IT

javascript - Angular2 - 防止复选框被选中

coder 2024-07-27 原文

我有一个表，每行包含一个复选框。在表格标题中，我有一个 Check All 复选框，用于切换所有表格行框。

我正在尝试实现一些逻辑，如果复选框的数量将超过特定限制，则显示错误并且不切换表行复选框或 checkall 框本身。

有一个问题允许选中 checkAll 框，即使我返回的是 false。我的绑定(bind)有问题？

HTML: 

<input type="checkbox" name="checkAll" [(ngModel)]="checkedAll" (ngModelChange)="toggleAllEmployees($event)">

组件:

toggleAllEmployees(flag) {

    const temp = [];

    if (flag) {

        // If selecting all of these passes the max, throw an error
        if (this.importResults.length > this.maxSelection) {

            /* This is where I get to when I display the error message */
            alert('The number of employees you are trying to select (' + this.importResults.length + ') exceeds the max limit.');
            return false;

        } else {
            for (let i = 0; i < this.importResults.length; i++) {
                if (this.importResults[i].OnTempAssignment !== 'True') {
                    this.importResults[i].checked = true;
                    temp.push(this.importResults[i]);
                }
            }
            this.employeeSelection = temp;

            // Emit our changes
            this.selectedEmployees.emit(this.employeeSelection);

        }
    } else {
        //The else statement just un-checks all the boxes.
    }
}

虽然没有选中任何表格行复选框，并且正确显示了错误，但我单击的框仍然处于切换状态。

我假设 return false; 会阻止这种情况，但我想不会。是不是我的绑定(bind)有什么问题导致它仍然可以切换？

最佳答案

ngModelChange 当绑定(bind)到复选框的值发生变化时被触发，停止切换操作已经晚了。

在这里你应该绑定(bind)click事件。然后你可以使用 $event.preventDefault() 来阻止复选框被切换。

您可以在 $event.preventDefault() 之前添加一些逻辑来确定是否应阻止复选框更改状态。

参见 Plunker demo .

关于javascript - Angular2 - 防止复选框被选中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45726725/

javascriptAngular2codesectionimportResultsangulartypescriptangular2-ngmodel

有关javascript - Angular2 - 防止复选框被选中的更多相关文章

  1. ruby-on-rails - Rails 3.2 防止使用错误保存对象 - 2

    我有一个ActiveRecord对象，我想在不对模型进行永久验证的情况下阻止它被保存。您过去可以使用errors.add执行类似的操作，但它看起来不再有效了。user=User.lastuser.errors.add:name,"namedoesn'trhymewithorange"user.valid?#=>trueuser.save#=>true或user=User.lastuser.errors.add:base,"myuniqueerror"user.valid?#=>trueuser.save#=>true如何在不修改用户对象模型的情况下防止将用户对象保存在Rails3.2中

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby-on-rails - 在 Label 标签中嵌套 Ruby on Rails HAML 复选框 - 2

    我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"

  4. ruby - 防止SQL注入(inject)/好的Ruby方法 - 2

    Ruby中防止SQL注入(inject)的好方法是什么？ 最佳答案 直接使用ruby？使用准备好的语句:require'mysql'db=Mysql.new('localhost','user','password','database')statement=db.prepare"SELECT*FROMtableWHEREfield=?"statement.execute'value'statement.fetchstatement.close 关于ruby-防止SQL注入(inject

  5. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  6. ruby-on-rails - 嵌套形式的 HABTM 复选框 - 2

    我正在尝试以嵌套形式实现HABTM复选框。目前，我有3个模型。主题、类(class)和小组。协会如下:每个科目都有很多课。每节课都属于许多小组。现在，我正在尝试在单个创建和编辑表单上实现它们。这样一节课嵌套在主题中，每节课都有一个组复选框列表来实现HABTM关系。我在实现HABTM关系时遇到了麻烦，因为每个科目都有很多类(class)，而且我不确定如何区分不同的类(class)。为了进一步详细说明，我能够使嵌套表单正常工作，但我无法让HABTM复选框保存到正确的类(class)中。以下代码示例是我的HABTM复选框实现。目前，我已经使用“subject[lessons_attribut

  7. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  8. ruby - 下拉菜单在应该被选中的时候没有被选中……为什么？ - 2

    我正在尝试解决我们测试中的一个错误，我认为它应该有效。我很确定这是selectize或capybara中的错误，但我不明白为什么。我已经进入了capybara的源代码，一切似乎都在正常工作。我真的不确定如何前进。为了测试这个错误，我已经尽可能地把这个错误剥离成一个小的testapplication.请参阅下面的设置bugs/show.html.erbOneTwoThreeFourOneTwoThreeFourbug_spec.rbfeature'bug'doit"specsetup",js:truedovisitbug_pathfind('div.selectize-inputinpu

  9. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

    我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

  10. ruby-on-rails - 如何防止错误 "code converter not found (UTF-8)"？ - 2

    我在生产环境(CentOS5.6)中遇到此错误，但在开发环境(Ubuntu11.04)中运行良好。在这两种环境中，该应用程序都使用Ruby1.9.3和Rails3.0.9，并由passenger和nginx提供服务。我的Mechanizegem版本是2.3。未找到代码转换器(UTF-8)此代码的最后一行触发它:mech=Mechanize.newpage=mech.get("http://myurl.com/login.php?login_name=a&password=b")form=page.form_with(:name=>"loginForm")form.field_with(

随机推荐