Javascript 在AngularJS中允许一个复选框_Javascript_Jquery_Angularjs_Checkbox

Javascript 在AngularJS中允许一个复选框

javascript jquery angularjs checkbox

Javascript 在AngularJS中允许一个复选框,javascript,jquery,angularjs,checkbox,Javascript,Jquery,Angularjs,Checkbox,我正在使用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 (

我正在使用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>


{{cat}}

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

<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}">

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

我怎么做

只需使用html单选按钮即可。单选按钮类似于复选框，但您只能同时选择一个

与复选框不同，单选按钮将值指定给模型，而不是真/假。所以你必须对你的代码稍加修改

首先：向单选按钮添加

值

属性并指定类别。第二：将self.filter从对象更改为字符串。第三：更改filterByCategory方法以匹配字符串而不是对象

就这些

总而言之：

更改的html部分：

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

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

可以找到工作小提琴