AngularJS，與干將單選按鈕和setter

我想有單選按鈕控制通過getter和setter外部對象的布爾屬性。AngularJS，與干將單選按鈕和setter

在下面的例子中，有多個Person，但只有一個可以是happy。其中一人已經開心了。我想通過單選按鈕來控制哪一個是快樂的。

因此，我創建了一個帶有無線電輸入的模板，但我無法將其綁定到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，不會觸發更多的T韓一次（我把它與輸入value屬性搞亂火災時的兩倍）

我可能是錯了，因爲我是一個初學者，但它看起來像ngChange是不是我想要的。

你認爲什麼是對這個問題的一個很好的解決方案呢？我是否需要寫一個父控制器手動管理的一些項目時停用其他得到激活？

來源

2017-08-31 GnxR

我認爲（至少我從演示中看到）使用無線按鈕實現不同的目的。

單選按鈕工作在其中每個按鈕共享ng-model基團。在你的情況human指令有自己的範圍，因此每個單選按鈕都有自己的模型酸當量獨立，這打破了單選按鈕的概念和用法。

切換到經典複選框type="checkbox"，一切都將正常工作

Demo Plunker

來源

2017-08-31 13:51:32

我真的希望他們表現得像單選按鈕，只有一個是'在任何給定的時間checked'，這就是爲什麼他們分享他們的'name'屬性。如果我沒有理解好了，我不能讓這種獨特性，但沒有實施'切換（）'方法一樣'PeopleCtrl'，父母控制，無論我是否使用無線電或複選框？ – GnxR

@GnxR'我真的希望他們表現得像單選按鈕，只有一個在任何給定的時間被檢查，這就是爲什麼他們分享自己的名字attribute.'所有的人都應該有相同的'NG-model'。所以你可以在控制器中創建它並傳遞給指令 –

AngularJS，與干將單選按鈕和setter

回答

相關問題