dimanche 15 octobre 2017

Allow one checkbox in AngularJS

I'm using AngularJS and filter option, like this:

  // 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]; });
 }

And this is my HTML:

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

These codes works good on the page. When I click an item in checkbox, it added class to my list:

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

Ok, but I've got a little problem. Now, I can select all items but it should be select one item in checkbox list and remove/add class by related.

How can I do it?




Aucun commentaire:

Enregistrer un commentaire