AngularJS，带有getters和setter的无线电按钮

Question

我试图通过getters and setters拥有电台按钮来控制外部对象的布尔属性。

在以下示例中，有多个Person，但只能是happy。其中一个已经很高兴了。我想控制哪个通过无线电按钮感到高兴。

因此，我创建了一个带收音机输入的模板，但是我无法将其绑定到person.happy，因为我无法访问此属性（假设Person是第三方库）。

为了将某些内容绑定到输入中，我创建了一个愚蠢的控制器，以提供默认值（Person值），并将更改传播到真实变量（简而言之，调用设置器）。我似乎无法做对的事情。

var app = angular.module('app', []);
// Person constructor ; happy is a private member
function Person(name, isHappy) {
  var happy = isHappy;
  this.name = name;
  this.getHappy = function() { return happy; }
  this.setHappy = function(value) { happy = value; }
}
// Inject a person list in the scope
app.controller('PeopleCtrl', function($scope) {
  $scope.people = [
    new Person('Alice', true),
    new Person('Bob', false),
    new Person('Carol', false)
  ];
});
// Template to display one person + happiness controller
var humanTemplate = [
  '<div><label>',
  '<input type="radio" name="group" ng-model="me.happy" ng-change="me.toggle()" value="{{ !me.happy }}">',
  '<span>{{ person.name }} is {{ me.happy ? "happy" : "sad" }}</span>',
  '</label></div>'
].join('');
// Directive to display one person
app.directive('human', function() {
  return {
    restrict: 'E',
    template: humanTemplate,
    scope: {
      person: '='
    },
    controllerAs: 'me',
    controller: function($scope) {
      var me = this;
      me.happy = $scope.person.getHappy();
      me.toggle = function() {
        console.log(me.happy);
        $scope.person.setHappy(me.happy);
      };
    }
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div ng-app="app" ng-controller="PeopleCtrl">
  <human ng-repeat="p in people" person="p"></human>
</div>

我本来以为ngChange会与无线电和复选框上的checked状态绑定（以某种方式是合乎逻辑的），但是有症状告诉我：

• ngChange未针对先前检查的无线电射击
• ngChange不会被射击多次（我在与输入value属性混乱时两次射击）

我可能会误会，因为我是一个初学者，但是看来ngChange不是我想要的。

您认为解决这个问题的好解决方案是什么？当另一个被激活时，我需要编写父控制器以手动管理某些项目的停用？

Answer 1

我认为（至少我从演示中看到的内容）您使用具有不同目的的无线电按钮。

无线电按钮以每个按钮共享ng-model的组工作。在您的情况下，human指令具有自己的范围，因此每个广播按钮都有自己的模型A.E.独立的，打破了无线电按钮概念和用法。

更改为经典复选框type="checkbox"，一切都可以正常工作

demo plunker