Question

我正在尝试在选择单选按钮时将单选按钮绑定为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

Answer 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

Answer 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以及不 "true"或"false"，则可以使用。

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

2 个答案: