角度绑定收音机到布尔值不起作用答案

【问题标题】：Angular binding radio to boolean doesn't work角度绑定收音机到布尔值不起作用
【发布时间】：2024-05-01 05:15:11
【问题描述】：

我有一个使用 AngularJS（经典）的表单，只有当用户是公司时才应该显示或不显示 CompanyName 字段。

默认情况下应选择“个人”单选：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app>
  <h4>You are:</h4> 
  Name <input ng-model="user.name">
  <h5>Individual or Company?</h5>

  <input type="radio" name="type" id="company" ng-model="user.isCompany" ng-value=true> a company = '{{user.isCompany}}'<br>
  <input type="radio" name="type" id="individ" checked > an individual<br>

  <div ng-show="user.isCompany">
    Company Name <input ng-model="user.companyName">
  </div>
</body>

如何绑定到无线电检查值以使其工作？

【问题讨论】：

标签： angularjs radio-button

【解决方案1】：

我在两个输入中都添加了ng-model 和ng-value，因此当您再次单击“个人”时，公司表单将消失。

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app ng-init="user.isCompany = false">
  <h4>You are:</h4> 
  Name <input ng-model="user.name">
  <h5>Individual or Company?</h5>

  <input type="radio" name="type" ng-model="user.isCompany" ng-value="true"> a company = '{{user.isCompany}}'<br>
  <input type="radio" name="type" ng-model="user.isCompany" ng-value="false"> an individual<br>

  <div ng-show="user.isCompany">
    Company Name <input ng-model="user.companyName">
  </div>
</body>

请注意，我在 <body> 中添加了 ng-init="user.isCompany = false"。你也可以把它移到你的控制器上让它更干净：

$scope.user = { ..., 'isCompany': false };

【讨论】：

【解决方案2】：

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<body ng-app>
  <h4>You are:</h4> 
  Name <input ng-model="user.name">
  <h5>Individual or Company?</h5>

  <input type="radio" name="type" id="company" ng-model="user.isCompany" ng-value="true"> a company = '{{user.isCompany}}'<br>
  <input type="radio" name="type" id="individ" ng-init="user.isCompany=false" ng-model="user.isCompany" checked ng-value="false"> an individual<br>

  <div ng-show="user.isCompany">
    Company Name <input ng-model="user.companyName">
  </div>
</body>

【讨论】：