Angular + ui.bootstrap. button + radio filter

tjjdgumg  于 2023-05-04  发布在  Bootstrap
关注(0)|答案(1)|浏览(143)

我想要一个按钮组作为单选按钮像这里。
我想要的是:

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

我如何用我的代码实现这一点?
我的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;
    };    

} );
wgeznvg7

wgeznvg71#

这和你想的一样吗
http://jsfiddle.net/HB7LU/278/
请注意,您的按钮需要有一个ng-class和一个ng-clickng-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;
};

相关问题