Question

我试图让单选按钮通过getter和setter来控制外部对象的布尔属性。

在以下示例中，有多个Person，但只有一个可以是happy。其中一人已经开心了。我想通过单选按钮控制哪一个很开心。

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

为了将某些东西绑定到输入，我创建了一个哑控制器，以提供默认值（Person值），并将更改传播到实变量（简而言之，调用setter）。我似乎无法把事情搞定。

＆＃13;

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);
      };
    }
  };
});

＆＃13;

<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>

＆＃13;

我原本以为ngChange会在收音机和复选框上绑定checked状态（本来是合乎逻辑的），但有些症状告诉我：

ngChange
ngChange不会被多次触发（我在弄乱输入value属性时会触发两次）

因为我是初学者，我可能会弄错，但看起来ngChange不是我想要的。

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

Answer 1

我认为（至少我从演示中看到的）你使用不同目的的单选按钮。

单选按钮适用于每个按钮共享ng-model的组。在您的情况下，human指令具有自己的范围，因此每个单选按钮都有自己的模型a.e.独立，打破单选按钮的概念和用法。

更改为经典复选框type="checkbox"，一切正常

Demo Plunker

AngularJS，带有getter和setter的单选按钮

1 个答案: