Question

我正在使用AngularJS和过滤器选项，如下所示：

  // Functions - Definitions
  function filterByCategory(box) {
    return (this.filter[box.cat1] || this.filter[box.videoYear] || noFilter(this.filter))? 'show':'not-click';
  }

  function filterByYear(box) {
    return (this.filter[box.videoYear] || this.filter[box.cat1] || noFilter(this.filter))? 'year':'not-year';
  }

  function getCategories() {
    return (self.boxes || []).
    map(function (box) { return box.cat1; }).
    filter(function (box, idx, arr) { return arr.indexOf(box) === idx; });
  }

  function getYear() {
    return (self.boxes || []).
    map(function (box) { return box.videoYear; }).
    filter(function (box, idx, arr) { return arr.indexOf(box) === idx; });
  }

  function noFilter(filterObj) {
   return Object.
   keys(filterObj).
   every(function (key) { return !filterObj[key]; });
 }

这是我的HTML：

   <li ng-repeat="cat in ctrl.getCategories()">
          <input type="checkbox" name="{{cat}}" ng-model="ctrl.filter[cat]" id='{{$index}}' class='chk-btn styled-checkbox' checked/>
          <label for='{{$index}}'>{{cat}}</label>
        </li>

这些代码在页面上运行良好。当我单击复选框中的某个项目时，它会将类添加到我的列表中：

<div data-toggle="modal" data-target="#dialogTestDialog{{$index}}" ng-click="Clear()" class="grid-item box {{box.class}} {{ctrl.filterByYear(box)}} {{ctrl.filterByCategory(box)}}"  ng-style="{'background-color': '#'+box.colorCode}">

好的，但我有一点问题。现在，我可以选择所有项目但是应该在复选框列表中选择一个项目并按相关删除/添加课程。

我该怎么做？

DEMO

Answer 1

只需使用html单选按钮。单选按钮就像复选框，但您只能同时选择一个。

与复选框不同，单选按钮为模型赋值而不是true / false。因此，您必须对代码稍作修改。

首先：在单选按钮中添加value属性并指定类别。第二步：将self.filter从一个对象改为一个字符串。第三步：更改filterByCategory方法以匹配字符串而不是对象。

这就是全部。

总而言之：

更改了html部分：

<label>
  <input type="radio" name="groupCat" value="{{category}}" ng-model="ctrl.filter" />
  {{ category }}
</label>

更改了js部分：

// Variables - Public
self.filter = '';
...
// Functions - Definitions
function filterByCategory(wine) {
    return (self.filter == wine.category)? 'show':'hide';
}

可以找到工作小提琴here

在AngularJS中允许一个复选框

1 个答案: