1

我想要一个按钮组像这里一样充当单选按钮。

我想要的是：

  • 默认情况下应禁用按钮，但默认情况下应显示所有条目。
  • 单选按钮行为。

我怎样才能用我当前的代码实现这一点？

我的 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;
    };    

} );
4

1 回答 1

4

这和你想的一样吗？

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

请注意，您的按钮需要有一个ng-class和一个ng-click。由于 ng-repeat 会创建子作用域，因此ng-click需要一个函数调用来设置作用域变量而不是赋值。

<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;
};
于 2013-08-27T03:55:57.797 回答