Angular checkbo、radio总结

最新推荐文章于 2018-11-22 15:33:28 发布

原创最新推荐文章于 2018-11-22 15:33:28 发布 · 598 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular

angularJS 专栏收录该内容

40 篇文章

订阅专栏

本文总结了AngularJS中Checkbox与Radio的基本用法，包括如何设置初始状态、使用ng-model动态控制状态以及自定义值等内容。适用于AngularJS开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结下，最近使用angularJS中checkbox和radio的使用，以方便后续使用。

一、CheckBox总结

<input Type="checkbox"       ng-model=""       [name=""]
       [ng-true-value=""]       [ng-false-value=""]       [ng-change=""]>

angular 中input[type="checkbox"]属性，

<form name="myForm" ng-controller="ExampleController">

  Value1: <input Type="checkbox" ng-model="value1" ng-checked="true"> <br/>
  Value2: <input Type="checkbox" ng-model="value2" ng-true-value="'YES'" ng-false-value="'NO'"> <br/>

  <tt>value1 = {{value1}}</tt><br/>  <tt>value2 = {{value2}}</tt><br/>
</form>

对象的JS

angular.module('checkboxExample', [])
    .controller('ExampleController', ['$scope', function($scope) {

      $scope.value1 = false;      
			$scope.value2 = 'YES';
	}]);

ng-checked控制初始化时，CheckBox状态，其值可以为常量：如0和1，ture和false；或者，变量，变量可以赋值为 0和1 或者 false和true等。ng-model，可以动态控制checkbox状态，ng-model值为变量，其值只能为true和false时，才可以控制，0和1 不行。

如果，需要自定义CheckBox不同状态时的值，可以使用ng-true-value和ng-false-value，当ng-model中的变量值和ng-true-value值相同时，则为选中状态，反之，去勾选。

二、radio总结

input[type="radio"],相应的属性为

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

<form name="myForm" ng-controller="ExampleController">
  <input Type="radio" ng-model="color" value="red">  Red <br/>
  <input Type="radio" ng-model="color" ng-value="specialValue"> Green <br/>
  <input Type="radio" ng-model="color" value="blue"> Blue <br/>
  <tt>color = {{color | json}}</tt><br/>
</form>

相应的JS，

 angular.module('radioExample', [])
    .controller('ExampleController', ['$scope', Function($scope) {
      $scope.color = 'blue';
      $scope.specialValue = {
        "id": "12345",
        "value": "green"
      };
    }]);

当ng-model中，变量的值与value值一致时，radio为选中状态。