Angular + ui.bootstrap.buttons +收音機過濾器

Question

我想要一個按鈕組充當單選按鈕，如here。

我要的是：

• 按鈕默認情況下應禁用，但所有條目應該默認顯示。
• 單選按鈕行爲。

我怎樣才能實現這與我目前的代碼？

我的HTML：

Filter By Title: 
<div class="btn-group"> 
<button type="button" ng-repeat="title in titles" class="btn btn-default" ng-model="selected[title]" btn-checkbox>{{title}}</button> 
</div> 

<table class="table table-bordered table-striped"> 
     <thead> 
     <tr> 
      <th>Title</th> 
      <th>Text</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr ng-repeat="entry in entries | filter:byTitle"> 
      <td>{{entry.title}}</td> 
      <td>{{entry.text}}</td> 
     </tr> 
     </tbody> 
    </table> 

我的JS：

App.controller('MainCtrl', function($scope, $http) { 
    $http.get('output/entries.json') 
    .then(function(res){ 
     $scope.entries = res.data;     
    });      

    $scope.selected = {}; 
    $scope.titles = ["sometitle","someothertitle","anothertitle"]; 

    function isChecked(obj){ 
     var checked = []; 
     for(var key in obj){ 
      if(obj[key]) 
       checked.push(key); 
     } 
     return checked; 
    }; 
    $scope.byTitle = function(entry){ 
     var checked = isChecked($scope.selected); 
     return checked.indexOf(entry.title) > -1; 
    };  

}); 

Answer 1

這是沿着自己所想的是什麼線？

http://jsfiddle.net/HB7LU/278/

注意你的按鈕需要有一個ng-class和ng-click。 ng-click需要是一個函數調用，該函數調用設置了一個範圍變量而不是由於ng-repeat導致的分配，這會創建子範圍。

<button 
    type="button" 
    ng-repeat="title in titles" 
    class="btn btn-default" 
    ng-model="selected[title]" 
    btn-checkbox 
    ng-class="{active: title == selectedTitle}" 
    ng-click="setSelectedTitle(title)">{{title}}</button> 

那麼你的功能，選擇一個變量：

$scope.setSelectedTitle = function (value) { 
    if ($scope.selectedTitle === value) { 
     $scope.selectedTitle = undefined; 
    } else { 
     $scope.selectedTitle = value; 
    } 
}; 

我不知道你是否希望它切換，還是不行。如果不是：

$scope.setSelectedTitle = function (value) { 
    $scope.selectedTitle = value; 
};