单选按钮 ng-model 为真/假（选中/未选中）答案

【问题标题】：Radio button ng-model to true/false (checked/unchecked)单选按钮 ng-model 为真/假（选中/未选中）
【发布时间】：2014-12-04 15:44:32
【问题描述】：

我正在尝试将单选按钮在选中单选按钮时绑定到 true，在未选中单选按钮时绑定到 false。我一定遗漏了一些非常明显的东西，因为我还没有做到。

我有一个简单的收藏，例如：

$scope.collection = [
    { id: 1, selected: true},
    { id: 2, selected: false},
    { id: 3, selected: false}];

我希望将“selected”属性绑定到单选按钮是否被选中。听起来很简单，但 ng-model 绑定到 undefined。 ng-checked 几乎可以正常工作，它显示正确的结果，但从未真正更新值...

Plunkr with the problem

【问题讨论】：

这听起来很简单，只是你想让单选按钮像复选框一样。您可能必须使用 ng-change 来更新控制器上 selected 的值。
我试图让 ng-change 工作，但由于它取决于 ng-model 我无法得到积极的结果。我用ng-click实现了一些逻辑绕过了这个问题，但是我觉得这个问题太简单了，它必须有一个简单干净的解决方案。

标签： javascript angularjs

【解决方案1】：

您可以将单选按钮绑定到控制器 $scope 中的右侧对象字段：

angular.module('ExampleApp', [])

.controller('ExampleCtrl', ['$scope', function ($scope) {
    $scope.radioContent = [
        {txt: 'One', checked: false},
        {txt: 'Two', checked: false}
    ];
    $scope.$watch('radioContent', function (now, then) {
        console.debug('Something changed', now);
    }, true);
}]);

还有 HTML：

<div ng-app="ExampleApp" ng-controller="ExampleCtrl">
    <div ng-repeat="radio in radioContent">
        <input type="radio" ng-model="radio.checked">{{radio.txt}}
    </div>
</div>

这是一个有效的Fiddle

【讨论】：

那个例子并不能很好地工作。我编辑了您的小提琴并在此处分叉：jsfiddle.net/ppb2yg7y 如您所见，我将选中的值更改为 true 并添加了带有选中值的文本，以进行调试。无线电的初始状态不正确（未选择）并且 ng-model 设置了未定义的值。当然，你得到了 change 事件，但是在 console.debug 中你也得到了未定义的值......我可以强制更改 watch 函数中的值，但感觉这不是正确的方法。没有干净的2路数据绑定方式吗？ :\
@CosmeBenito 谢谢，但这只是一个关于如何使用ng-model 绑定的快速示例。
感谢您的时间和努力，但它实际上并不具有约束力，因为结果始终未定义：P 我已经到了这一点，但“拒绝”相信这是最佳方式。
@CosmeBenito 我认为没有比这更好的方法了：jsfiddle.net/t4grd50a 但这不起作用。如果我错了，请纠正我，但也许这是 AngularJS 试图做太多“魔法”的地方之一？
我不知道，除非绝对必要，否则我倾向于避免使用 $scope.$watch。我创建了一个绑定到当前选定对象的变量，并创建了一个 ng-click 函数来更新之前选择的单选（为 false）和单击的单选（为真）。它有效，但感觉没有棱角。

【解决方案2】：

似乎 ng-bind 和 ng-selected 不适用于单选按钮，但如果您将单选按钮更改为复选框，代码将按预期工作。

使用@Ashesh 的回答，按钮的radio.checked 属性在与单选按钮混淆一次后仍会变为未定义。

Working plunkr

<!DOCTYPE html>
<html>
  <head>
    <script data-require="angular.js@*"
            data-semver="1.3.0-beta.5"
            src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <script>
      angular.module("sampleapp", [])
      .controller('samplecontroller', function($scope,$rootScope) {
        $scope.collection = [
          { id: 1, selected: true},
          { id: 2, selected: false},
          { id: 3, selected: false}];
      });
    </script>

  </head>
  <body ng-app="sampleapp" ng-controller="samplecontroller">
    <div class="radio" ng-repeat="element in collection">
      <span ng-bind="element.id"></span>
      <span ng-bind="element.selected"></span>
      <input type="checkbox" name="whatever" ng-model="element.selected">
    </div>
  </body>
</html>

但是，如果您将选定的属性更改为 true 或 false 并且 NOT "true" 或 "false"，它会起作用。

【讨论】：

是的，这是真的。但是，我不想让用户认为他可以选择多个选项。
玩过我的小提琴后，似乎在单击单选按钮后， item.selected 属性就消失了。
是的，因为 ng-model 绑定到 undefined。
@mutlei 我想要这样的相同答案，而是单选按钮