如何将单个复选框值与 AngularJS 控制器绑定

Posted 2023-02-22

【中文标题】如何将单个复选框值与 AngularJS 控制器绑定

【英文标题】：How to bind single checkbox value with AngularJS Controller

【发布时间】：2016-12-15 01:52:12

【问题描述】：

我检查了问题How to bind to list of checkbox values with AngularJS。但是这个问题解释了数组列表以及在 Angular 控制器中处理它的最佳方法。

<input type='checkbox' name="filter" checked>

我们如何将值绑定到复选框，以便在未选中时将值作为模态 0，在选中时将值作为模态 1？ html 和 Controller 应该是什么？

$scope.filter = 0;

【问题讨论】：

plnkr.co/edit/rGK1fbYHQinH7OoO6Qqm?p=preview

【参考方案1】：

试试这个：

$scope.filter = 0;//or 1

HTML：

<input type="checkbox" ng-model="filter" ng-true-value="1" ng-false-value="0">

【参考方案2】：

这是一个基于AngularJS documentation的修改示例

控制器

angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) 
    $scope.checkboxModel = 0; //Set checkbox to unchecked
]);

HTML

<input type="checkbox" ng-model="checkboxModel" ng-true-value="1" ng-false-value="0">

【讨论】：

我的答案的好副本。

对不起，我没有看到它...我正在写我的答案

【参考方案3】：

Angular 提供了 ng-true-value 和 ng-false-value 指令来满足您的要求。通过它，您可以将真/假值与复选框相关联，并且模型也将使用相同的值。

你可以试试下面的代码

<div ng-controller="ValidateCtrl">
    Check Value: <input type="checkbox" ng-true-value="1" ng-false-value="0" ng-model="checkBoxModel"/>
</div>

Controller
---------
function ValidateCtrl($scope) 
   $scope.checkBoxModel = '1';
;

所以最初复选框将被选中。