`

angularjs 监视checkbox的变化

阅读更多

这篇博文大概是一个月前写的,以前发在了sina微博上。刚刚转过来。

最近同事在用angularjs做一个android应用,其中一个功能是选择对某个服务的开和关。他选择使用了checkbox,但是怎么找到checkbox的值呢?他找了很久没有找到,来找到了我。

我大概有一个多月没写javascript了。然后果断的说,没做过,但是可以查查看。Google了一下,都是翻译的原文档。没有什么价值。最后想到了ng-change。于是便在里面controller里面写了个ng-change的方法,然后打印了一下,果断能够正确运行了。贴一段代码吧:

 一下为haml:

 

%input.input-small(type="num" 
ng-model="drawing_top_limit" 
ng-change="judge_drawing_top_limit()" 
)

下面为controller里面的内容:

 

 

$scope.judge_drawing_top_limit= function() {

console.log("user choice is :" +$scope.drawing_top_limit);

}

 然后就能够看见控制台下不断有log输出了。你还可以在这里面来获得值。

 

 

 

0
0
分享到:
评论

相关推荐

    angularjs实现的checkbox多选、全选、反选

    在本文中,我们将深入探讨如何使用AngularJS实现一个功能完备的复选框(checkbox)系统,包括多选、全选和反选功能。这个系统的一个关键特性是它完全基于AngularJS,无需依赖其他源数据,因此可以确保原始数据的完整...

    AngularJS单选框及多选框实现双向动态绑定

    在AngularJS中,双向数据绑定是一项核心特性,它使得视图和模型之间的数据可以自动保持同步。本篇文章主要探讨如何利用ng-model指令实现单选框(radio)和多选框(checkbox)的双向动态绑定。 一、ng-model指令 ng-...

    最新AngularJS开发宝典视频教程 后盾网AngularJS培训视频教程 后盾网.txt

    ├最新AngularJS开发宝典—第010讲 实例讲解angular操作checkbox复选框.mp4 ├最新AngularJS开发宝典—第011讲 实例讲解angular操作select列表框.mp4 ├最新AngularJS开发宝典—第012讲 函数使用方法大小写转换与...

    checkbox多项选中及取消选中

    在前端开发中,`checkbox` 是一种常用的表单元素,用于让用户进行多项选择。本教程将深入探讨如何实现 `checkbox` 的多项选中与取消选中的功能,以及相关的 `attr` 和 `prop` 属性在其中的作用。 1. **Checkbox基本...

    WPF 自定义CheckBox样式

    为了响应CheckBox的状态变化(如选中、未选中),我们需要添加Visual State Manager来控制不同状态下的显示。例如,当CheckBox被选中时,我们可以改变`FontIcon`的`Glyph`属性来展示选中状态的图标。 在实际应用中...

    angularJs复选框checkbox选中进行ng-show显示隐藏的方法

    在本例中,我们将探讨如何使用AngularJS的`ng-show`指令与复选框(`checkbox`)配合,根据复选框的状态来控制内容的显示和隐藏。 首先,我们需要了解AngularJS中的`ng-model`指令。`ng-model`用于双向数据绑定,它...

    PB 11.5 CheckBox三种状态的实例

    如果CheckBox是三态的,即包括“不确定”状态,那么ValueChange事件会在状态变化时被触发,即使状态是从已选中到未选中,反之亦然。 4. 示例代码: 创建一个简单的PowerBuilder应用,包含一个CheckBox控件,可以在...

    jquery checkbox 选中 取消 checkbox多选

    在网页开发中,jQuery是...总之,jQuery提供了一套简单易用的API来处理HTML中的复选框,包括选中、取消选中、监听变化以及获取选中状态等功能。通过灵活运用这些API,开发者可以轻松地创建具有复选框功能的交互式网页。

    ListView中添加CheckBox

    1、ListView item中加入checkbox后onListItemClick 事件无法触发。 原因:checkbox的优先级高于ListItem于是屏蔽了ListItem的单击事件。 解决方案:设置checkbox的android:focusable="false" 2、选择其中的...

    android CheckBox的使用

    在Android开发中,CheckBox是用户界面(UI)中不可或缺的组件之一,它允许用户进行多选操作,非常...同时,理解如何监听CheckBox状态变化,以及在ListView中使用CheckBox,将有助于你构建更加用户友好的Android应用。

    带CheckBox的TreeView控件

    - 使用MVVM(Model-View-ViewModel)设计模式,ViewModel负责维护数据模型,View负责展示UI,ViewModel中的数据变化会自动反映到View上。 - 数据绑定机制使得CheckBox的IsChecked属性与数据模型中的对应字段联动,...

    循环动态判断checkbox是否被选中

    - **事件处理**:除了通过遍历来检测`Checkbox`的状态外,还可以通过绑定事件处理程序来响应`Checkbox`状态的变化。例如,可以为每个`Checkbox`绑定`CheckedChanged`事件处理程序。 ```csharp protected void ...

    checkbox的应用示例

    在动态交互中,JavaScript和jQuery可以用于监听Checkbox状态变化,执行相应操作。例如,获取选中状态,添加事件监听器: ```javascript let checkbox = document.getElementById('exampleCheckbox'); checkbox....

    Asp.net CheckBoxList操作集合

    在ASP.NET Web Forms开发中,CheckBoxList控件是一种常用的选择组件,它允许用户从一系列选项中选择一个或多个项目。本篇文章将详细讲解如何进行CheckBoxList的操作,包括获取选中项、实现全选、取消选中以及反选...

    C#WinForm控件美化CheckBox

    在Windows Forms(WinForm)开发中,CheckBox控件是一个基础且重要的元素,用于实现用户界面中的复选框功能。在.NET 2.0版本和Visual Studio 2005(VS2005)环境下,开发者可以利用丰富的特性来定制和美化这些控件,...

    C# WinForm 自定义CheckBox

    在这个框架中,CheckBox控件是经常被用到的一种交互元素,它允许用户通过勾选或取消勾选来表示一种选择状态。本教程将深入讲解如何在WinForms中自定义CheckBox控件,以满足特定的界面或功能需求。 首先,自定义...

    WPF之CheckBox组的全选设计

    在Windows Presentation Foundation (WPF) 中,CheckBox控件经常用于用户界面中提供多选选项。在设计一个CheckBox组时,可能会遇到需要实现全选功能的需求,即点击一个主CheckBox可以同时选择或取消选择所有子...

    解决ListView嵌套CheckBox滑动时选中状态错乱

    总结来说,解决ListView嵌套CheckBox滑动时的选中状态错乱问题,需要深入理解ListView的工作机制,合理利用ViewHolder,正确绑定数据,监听并处理CheckBox的状态变化,以及适当地处理点击事件。通过这些步骤,可以...

    AngularJS程序

    `ng-checked` 可以根据表达式设置Checkbox的初始状态,而`ng-change` 可以监听Checkbox状态变化并执行相应的回调函数。 总的来说,这个AngularJS程序展示了框架的核心特性,包括双向数据绑定、指令系统、服务和依赖...

    jQuery操作checkbox并获取选中值

    本文将详细讲解如何使用jQuery来操作checkbox,并实现全选、全不选、反选以及获取选中值这四个核心功能。 ### 一、jQuery选择器与checkbox操作 在jQuery中,我们可以使用不同的选择器来选取页面上的checkbox元素。...

Global site tag (gtag.js) - Google Analytics