AngularJS、ゲッターとセッターのラジオボタン

Question

ゲッターとセッターを介して外部オブジェクトのブール値プロパティを制御するラジオボタンを用意しようとしています。

Personの複数の例がありますが、1つのみがhappyです。そのうちの1人はすでに幸せです。私はラジオボタンでどれが幸せであるかを制御したい。

したがって、ラジオ入力のテンプレートを作成しましたが、このプロパティにアクセスできないため、person.happyにバインドすることはできません（Personはサードパーティ製のライブラリ）。

何かを入力にバインドするために、ダムコントローラを作成してデフォルト値（Personの値）を提供し、変更を実際の変数に伝えます（要するに、setterを呼び出します）。私は物事を正しいものにすることはできません。

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は、ハンは、かつて

私は初心者ですので、私は誤解されるかもしれないが、それはngChangeのように見えますが、私が欲しいものではありません（私は入力value属性をいじったときに、それは二回発射しました）。

この問題を解決するにはどうすればよいでしょうか？ 他のアイテムがアクティブになったときに、一部のアイテムの無効化を手動で管理するために、親コントローラを作成する必要がありますか？

Answer 1

私は（少なくとも私がデモから見るもの）異なる目的のラジオボタンを使用すると思います。

ラジオボタンは、各ボタンが共有されているグループで動作しますng-model。あなたのケースでは、humanディレクティブには独自のスコープがあるため、各ラジオボタンには独自のモデルがあります。ラジオボタンの概念と使用法を破るスタンドアローン。

古典チェックボックスtype="checkbox"に変更し、すべてが正常に

Demo Plunker