AngularJS切換按鈕指令列表

我想創建一個可重用的切換/切換列表組件。AngularJS切換按鈕指令列表

我已經提出了一個<toggle>指令，現在想要一個<toggle-list>包含多個<toggle>'s。

<toggle-list> 
    <toggle value="A">Toggle A</toggle> 
    <toggle value="B">Toggle B</toggle> 
</toggle-list>

。

app.directive("toggle", function(){ 
return { 
    scope: {}, 
    restrict: "E", 
    transclude:true, 
    templateUrl: "toggle-element.html", 
    link: function(scope){ 
     scope.toggled = false; 

     scope.toggle = function(){ 
     scope.toggled = !scope.toggled; 
     } 
    } 
} 
});

這裏是我的working plnkr.

我希望我的<toggle-list>返回如。所選值的數組。
我該如何實施？
這是做這件事的好方法，還是我只是試圖重新發明輪子？

來源

2014-03-24 wojciech_rak

如果點擊按鈕A，上面的例子中應該顯示''？ – dmahapatro

類似的問題已經被定期詢問，我相信這是一段時間的功能請求：http://stackoverflow.com/questions/14514461/how-can-angularjs-bind-to-list-of-checkbox-values –

在您的孩子的指令

require: '^toggleList',

現在你有機會通過鏈接功能的第四個參數togglelist。

function(scope, el, attrs, toggleListCtrl, $transclude)

，那麼你可以調用從切換指令父控制器

上的方法填充的子元素的數組：在父控制器

scope.rank = toggleListCtrl.addToggle(el);

：

this.toggles = []; 
this.addToggle = function (toggle) { 
    var rank = this.toggles.push(toggle); 
    return rank; 
};

來源

2014-03-25 17:15:43 Olivvv

AngularJS切換按鈕指令列表

回答

相關問題