Autoriser une case à cocher dans AngularJS

Question

J'utilise AngularJS et option de filtre, comme ceci:

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

Et ceci est mon 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> 

Ces codes fonctionne bien sur la page. Lorsque je clique sur un élément dans la case, il a ajouté la classe à ma liste:

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

Ok, mais j'ai un petit problème. Maintenant, je peux sélectionner tous les éléments, mais il devrait être sélectionner un élément dans la liste de case à cocher et supprimer/ajouter une classe par connexes.

Comment puis-je le faire?

DEMO

Answer 1

utiliser simplement les boutons radio-html. Les boutons radio sont comme des cases à cocher mais vous ne pouvez en sélectionner qu'un en même temps.

Contrairement aux cases à cocher, les boutons radio attribuent une valeur au modèle au lieu de true/false. Vous devez donc apporter quelques modifications à votre code. Tout d'abord: ajoutez un attribut value aux boutons radio et affectez la catégorie. Deuxièmement: changez self.filter d'un objet à une chaîne. Troisièmement: modifiez la méthode filterByCategory pour qu'elle corresponde à une chaîne et non à un objet.

C'est tout.

Au total:

Changé partie html:

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

Changé partie js:

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

violon de travail se trouvent here