使用AngularJS处理单选框和复选框的简单方法

2024-10-20 09:59:09

AngularJS对表单的处理相当简单。在AngularJS使用双向数据绑定方式进行表单验证的时候，实质上它在帮我们进行表单处理。

使用复选框的的例子有很多，同时我们对它们的处理方式也有很多。这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法。

创建Angular表单

在这篇文章里，我们需要两个文件:index.html和app.js。app.js用来保存所有的Angular代码（它不大），而index.html是动作运行的地方。首先我们创建AngularJS文件。

// app.js

var formApp = angular.module('formApp', [])

  .controller('formController', function($scope) {

    // we will store our form data in this object
    $scope.formData = {};

  });

在这个文件里，我们所做的就是创建Angular应用。其中我们还创建了一个控制器和一个用来保存所有表单数据的对象。

下面我们看看index.html文件，在这个文件里，我们创建了表单，然后进行了数据绑定。我们使用了Bootstrap快速地对页面进行布局。

<-- index.html -->
<!DOCTYPE html>
<html>
<head>

  <!-- CSS -->
  <!-- load up bootstrap and add some spacing -->
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <style>
    body     { padding-top:50px; }
    form      { margin-bottom:50px; }
  </style>

  <!-- JS -->
  <!-- load up angular and our custom script -->
  <script src="http://code.angularjs.org/1.2.13/angular.js"></script>
  <script src="app.js"></script>
</head>

<!-- apply our angular app and controller -->
<body ng-app="formApp" ng-controller="formController">
<div class="col-xs-12 col-sm-10 col-sm-offset-1">

  <h2>Angular Checkboxes and Radio Buttons</h2>

  <form>

    <!-- NAME INPUT -->
    <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" name="name" ng-model="formData.name">
    </div>

    <!-- =============================================== -->
    <!-- ALL OUR CHECKBOXES AND RADIO BOXES WILL GO HERE -->
    <!-- =============================================== -->

    <!-- SUBMIT BUTTON (DOESNT DO ANYTHING) -->
    <button type="submit" class="btn btn-danger btn-lg">Send Away!</button>

  </form>

  <!-- SHOW OFF OUR FORMDATA OBJECT -->
  <h2>Sample Form Object</h2>
  <pre>
    {{ formData }}
  </pre>

</div>
</body>
</html>

创建完成之后，我们就有了具有name输入的表单了。如果一切都按照我们设想的运行，那么如果你在name输入中键入内容，那么你应当可在下面的<pre>标签段看到所输入的内容了.

复选框

在表单里，复选框非常普遍。下面我们将看看Angular是怎样使用ngModel实现数据绑定的。如果有许多复选框，那么有时在把它绑定到对象的时候如何进行数据处理会让人不知所措。

在我们创建的formData对象的内部，我们还创建了另一个对象。我们把它称为favoriteColors，它请求用户选择最喜欢的颜色：

<!-- MULTIPLE CHECKBOXES -->
<label>Favorite Colors</label>
<div class="form-group">
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.red"> Red
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.blue"> Blue
  </label>
  <label class="checkbox-inline">
    <input type="checkbox" name="favoriteColors" ng-model="formData.favoriteColors.green"> Green
  </label>
</div>

当用户点击上面复选框中的任意一个时，他们立刻看到formData对象发生了变更。我们把复选框的值存储到fromData.favoriteColors对象里。这样我们就把复选框的值传递给了服务器了。

复选框点击处理

有时候，当某人点击了复选框后，你需要对其进行处理。你需要做的处理可能如下：计算某个值，更改某些变量或者进行数据绑定。要实现这些，你要使用$scope.yourFunction = function() {};在app.js内创建函数。接着你就可以在的的复选框上使用ng-click="yourFunction()"来调用这个函数了。

处理表单复选框的方法有许多种，Angular提供了一个非常简单的方法：使用ng-click调用用户自定义的函数。

自定义复选框对应的值

默认情况下，绑定到复选框上的值是ture或者false。有时候，我们希望返回的其它值。Angular提供了一种非常好的处理方式：使用ng-ture-value和ng-false-value。

我们添加另外一组复选框，不过这时侯我们使用的不再是true或者false，而是用户自定义的值。

<!-- CUSTOM VALUE CHECKBOXES -->
<label>Personal Question</label>
<div class="checkbox">
  <label>
    <input type="checkbox" name="awesome" ng-model="formData.awesome" ng-true-value="ofCourse" ng-false-value="iWish">
    Are you awesome?
  </label>
</div>

另外，现在我们还在formData对象里增加了一个awesome变量。如果此时设置这个值为true，那么返回的值应该是ofCourse，如果设置为false，那么返回的值为iWish。

复选框

依据官方说明文档, 这是和单选框不同之处:

<input type="radio"
  ng-model="string"
  value="string"
  [name="string"]
  [ng-change="string"]
  ng-value="string">

需要了解更多有关复选框的信息，请关注Angular 复选框说明文档.
单选按钮

单选按钮比复选框容易些，就在于无需存储多选项数据. 单选就是一个值. 下面添加一个单选按钮看看.

<!-- RADIO BUTTONS -->
<label>Chicken or the Egg?</label>
<div class="form-group">
  <div class="radio">
    <label>
      <input type="radio" name="chickenEgg" value="chicken" ng-model="formData.chickenEgg">
      Chicken
    </label>
  </div>
  <div class="radio">
    <label>
      <input type="radio" name="chickenEgg" value="egg" ng-model="formData.chickenEgg">
      Egg
    </label>
  </div>
</div>

就像这样，单选按钮就绑定到数据对象了.

单选按钮用法

据官方文档, 这是提供的选项:

<input type="radio"
    ng-model="string"
    value="string"
    [name="string"]
    [ng-change="string"]
    ng-value="string">

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

AngularJS 在 <input type="text" /> 中实现双向动态绑定十分简单,如下所示: <input type="text" ng-model="topic.title" /> 只需要用ng-model 与 $scope 中的属性对应,即实现了type="text" 的双向动态绑定.当 <input type="radio" /> 及 <inpu
Angularjs单选框相关的示例代码

本文介绍了Angularjs单选框相关的示例代码,分享给大家.具体如下: 使用angular1.6.5 1.ng 获取ng-repeat遍历出来的radio的value 1)普通形式(不使用ng-repeat) 可以正常显示 <input type="radio" name="t1" ng-model="demo" value="a">a <br> <input type="radio&
AngularJS单选框及多选框实现双向动态绑定

在AngularJS中提及双向数据绑定,大家肯定会想到ng-model指令. 一.ng-model ng-model指令用来将input.select.textarea或自定义表单控件同包含它们的作用域中的属性进行绑定.它将当前作用域中运算表达式的值同给定的元素进行绑定.如果属性不存在,它会隐式创建并将其添加到当前作用域中. 始终用ng-model来绑定scope上一个数据模型内的属性,而不是scope上的属性,这可以避免在作用域或后代作用域中发生属性覆盖! <input type="te
javascript判断单选框或复选框是否选中方法集锦

提示:getEmementsByName方法的作用是根据 NAME 标签属性的值获取对象的集合. 样例一<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>判断单选框或复选框是否选中</title> </head> <body> <input name
js获取单选框或复选框值及操作

复制代码代码如下: <script> function checkbox() { var str=document.getElementsByName("box"); var objarray=str.length; var chestr=""; for (i=0;i<objarray;i++) {//欢迎来到我们,我们的网址是www.jb51.net,很好记,我们,js就是js特效,本站收集大量高质量js代码,还有许多广告代码下载. if(st
vue.js实现单选框、复选框和下拉框示例

Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label
js和jquery分别验证单选框、复选框、下拉框

本文分别介绍了js和jQuery验证单选框(radio).多选框(checkbox).下拉框(select),分享给大家供大家参考,具体内容如下 (1).首先说单选框(radio),radio和checkbox一样都是name相同值有多个在获取 radio 值的时候我们不能按照普通文本框.value的方式,而是要判断哪个被选中了. js验证是要用getElementsByName()获取数组 js代码如下: <script> function test(){ var sex = documen
用jquery与css打造个性化的单选框和复选框

上图是经过css和jquery美化后的效果,怎么样呢?是不是很爽啊!这个是我从另一个脚本库看到的一个效果,觉得挺不错的,然后就用jquery自己实现了一个.供大家鉴赏! 话不多说,直接上代码: 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)

各种对下拉列表.文本框.复选框.单选框的jquery的相关操作.做为记录和收藏的最好方法. 遍历option和添加.移除optionfunction changeShipMethod(shipping){ var len = $("select[@name=ISHIPTYPE] option").length if(shipping.value != "CA"){ $("select[@name=ISHIPTYPE] option").each
js实现iPhone界面风格的单选框和复选框按钮实例

本文实例讲述了js实现iPhone界面风格的单选框和复选框按钮.分享给大家供大家参考.具体如下: 这里使用JS美化仿iPhone风格的单选框和复选框按钮效果,使用了jQuery代码,附有完整实例及使用方法,现在,iPhone风格确实流行,希望大家也喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-iphone-radio-checkbox-button-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "
使用AngularJS处理单选框和复选框的简单方法

AngularJS对表单的处理相当简单.在AngularJS使用双向数据绑定方式进行表单验证的时候,实质上它在帮我们进行表单处理. 使用复选框的的例子有很多,同时我们对它们的处理方式也有很多.这篇文章中我们将看一看把复选框和单选按钮同数据变量绑定的方法和我们对它的处理办法. 创建Angular表单在这篇文章里,我们需要两个文件:index.html和app.js.app.js用来保存所有的Angular代码(它不大),而index.html是动作运行的地方.首先我们创建AngularJS文件.
jquery 操作单选框，复选框，下拉列表实现代码

1.复选框全选操作:其实说到底就是对Jquery 选择器的运用,点我查看Jquery选择器 html代码: 复制代码代码如下: <form> 您爱好的运动是: <input type="checkbox" name="item" value="football"/> football <input type="checkbox" name="item" value="
在js中单选框和复选框获取值的方式

复制代码代码如下: // JavaScript Document function sub1() { // 用Form名称直接引用form对象 //form1.method = "get"; // 将form名称作为document对象的属性来引用form对象, // 并用user作为form对象的属性来引用名为user的文本框元素对象 // document.form1.user.value = "lisi"; var s1=

使用AngularJS处理单选框和复选框的简单方法

相关推荐

随机推荐