Häkchen auf Klick Hinzufügen, Entfernen alle anderen

Ich habe eine ng-repeat mit einem Knopf, der wie folgt aussieht:Häkchen auf Klick Hinzufügen, Entfernen alle anderen

<div data-ng-repeat="department in departments_array"> 
    <div class="row"> 
     <div class="col-md-6 dslc-button-wrapper"> 
      <button class="btn btn-default btn-block">Show on Map {{ 1 | checkmark }}</button> 
     </div> 
    </div> 
</div>

ich diesen Filter gefunden haben, die ich eine Checkbox verwenden möchten anzuzeigen, wenn die ausgewählte Element angeklickt wird, und entfernen Sie alle anderen Markierungen von den anderen ng-Repeat-Tasten zur gleichen Zeit:

angular.module('Filters', []).filter('checkmark', function() { 
    return function(input) { 
    return input ? '\u2713' : ''; 
    }; 
});

ich so viele Wege ausprobiert habe, wie ich weiß, wie, aber ich habe es geschafft, nur um am Ende mit der Möglichkeit, das Häkchen für jeweils ein Element hinzuzufügen oder zu entfernen.

Jede Hilfe wäre sehr dankbar

Dank

Quelle

2016-03-29 Gerard Simpson

Persönlich würde ich nicht einen Filter verwenden, dies zu tun. Es ist nicht die richtige Art, den Staat aus Ihrer Sicht zu verwalten. Eine Variable auf Ihrem Controller ist eine typische und lesbare Lösung. Lösung Unten mit Plunker:

controller.js

myApp.controller('myController', function() { 
    var self = this; 
    self.departments_array = ['dept A', 'dept B', 'dept C']; 
    self.selected_dept = undefined; 
});

index.html

<body ng-app="my-app"> 
    <div ng-controller="myController as mc"> 
     <div data-ng-repeat="department in mc.departments_array"> 
      <div class="row"> 
       <div class="col-md-6 dslc-button-wrapper"> 
        <button ng-click="mc.selected=department" class="btn btn-default btn-block"> 
        Show on Map <span ng-show="mc.selected===department">&#10003;</span></button> 
       </div> 
      </div> 
     </div> 
    </div> 
    </body>

Quelle

2016-03-29 04:30:49

Ich weiß nicht, wie dieser Code funktioniert, bin ich mit $ Umfang verwendet in meine Controller. Könnten Sie bitte expandieren oder mir helfen, dies mit $ scope anzuwenden? –

Verwendet den Controller als Syntax. Schau dir den Plunker an. Grundsätzlich ist das alles anders, wenn Sie den Controller deklarieren als '' ng-controller = "myController as mc" '' Dann wird allen untergeordneten Scope-Variablen das Präfix mc vorangestellt. Im Controller fügen Sie alles hinzu. ist das gleiche wie die alte Art, $ scope zu machen. –

Bitte, können Sie sich diesen Plunker anschauen? Ich kann es immer noch nicht zur Arbeit: https://plnkr.co/edit/TNp6N5yBuee5sUeR295h?p=preview –

Häkchen auf Klick Hinzufügen, Entfernen alle anderen

Antwort

Verwandte Themen