文章转自:http://www.cnblogs.com/ryt103114/p/6223135.html

前言：今天遇到一个问题，需要对多选按钮进行操作，作为js菜鸟，只能做自己慢慢琢磨了……

　　<span class="addon-left">Grade</span>

</label>

①在input上面绑定ng-checked属性，这个就是多选按钮的未选择和被选择的两种状态的描述

如果需要该多选按钮被选择，只需ng-checked="true“，相反如果取消选择，只需ng-checked="false“

②在input上面绑定属性ng-click,即点击事件。通过点击事件改变ng-checked的值，

③重置：

就是将所有的多选按钮的ng-checked值全部变成false.

④全选：

就是将所有的多选按钮的ng-checked值全部变成true.

个人看法：针对于ng-checked来说，可以设定相关的value值，因为checkbox就两种状态，一种是true，另一种是false，那我们可以设定ng-value-true和ng-value-false来改变值。也可以做ng-model操作，绑定一个值，去controller里面做相关的逻辑处理。

文章来自：http://www.oschina.net/translate/handling-checkboxes-and-radio-buttons-in-angular-forms?cmp

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

以前，我曾经写过AngularJS在表单处理方面的强大功能以及如何进行的文章。今天，我们将快速浏览一下AngularJS是如何对表单中的复选框和单选按钮进行处理的。

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

创建Angular表单

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

// app.jsvar formApp = angular.module('formApp', [])    .controller('formController', function($scope) {          // we will store our form data in this object        $scope.formData = {};            });

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

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

<-- index.html -->    
          
          
      
           
           
           
           
       
            
        
         
         
          
               
           Angular Checkboxes and Radio Buttons
    
           
                        
                    
            
                         
             Name            
             
                                      
                      
                      
                              
                      
              
               Send Away!                    
                   
               Sample Form Object
    
                       {
     { formData }}

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

复选框

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

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


      Favorite Colors
      
           
       
                
        
          Red        
         
                  
          
            Blue        
           
                    
            
              Green

当用户点击上面复选框中的任意一个时，他们立刻看到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，而是用户自定义的值。


      Personal Question
      
           
               
        
                 Are you awesome?

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

复选框

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

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

单选按钮

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


      Chicken or the Egg?
      
           
       
                
                    
         
                      Chicken        
                 
        
                 
                     
          
                       Egg

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

单选按钮用法

据 , 这是提供的选项:

解磷

正如你所见，使用Angular绑定复选框和单选按钮都是十分简单的. 在创建更具个性的复选框或是单选按钮时，它也有很大的灵活性.

源码 :

标签: , , ,

转载于:https://www.cnblogs.com/Uncle-Maize/p/6288619.html

你可能感兴趣的文章