webentwicklung-frage-antwort-db.com.de

Wie markiere ich eine ausgewählte Zeile in ng Repeat?

Ich konnte nichts finden, was mir bei der Lösung dieses einfachen Problems in Angular helfen könnte. Alle Antworten sind für Navigationsleisten relevant, wenn ein Vergleich mit dem Standortpfad durchgeführt wird.

Ich habe eine dynamische Tabelle mit list und ngRepeat erstellt. Wenn ich auf eine Zeile klicke, versuche ich, dieser Zeile eine ausgewählte CSS-Klasse zuzuweisen, um die Tatsache hervorzuheben, dass diese Zeile vom Benutzer ausgewählt wurde, und den .selected Aus der zuvor hervorgehobenen Zeile zu entfernen.

Ich vermisse die Methode, um zwischen der ausgewählten Zeile und der CSS-Klassenzuweisung zu binden.

Ich habe auf jedes row (ul) ng-click="setSelected()" angewendet, aber mir fehlt die Logik innerhalb des function, um die Änderungen anzuwenden.

Mein Code - Plunk

Mein Code:

var webApp = angular.module('webApp', []);

//controllers
webApp.controller ('VotesCtrl', function ($scope, Votes) {
    $scope.votes  = Votes;
    $scope.statuses = ["Approved","Pending","Trash","Spam"];

    $scope.setSelected = function() {
       console.log("show");

    }
});

//services
webApp.factory('Votes', [function() {

    //temporary repository till integration with DB this will be translated into restful get query
    var votes = [
        {
            id: '1',
            created: 1381583344653,
            updated: '222212',
            ratingID: '3',
            rate: 5,
            ip: '198.168.0.0',
            status: 'Pending',
        },
        {
            id: '111',
            created: 1381583344653,
            updated: '222212',
            ratingID: '4',
            rate: 5,
            ip: '198.168.0.1',
            status: 'Spam'    

        },
        {
            id: '2',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.2',
            status: 'Approved'

        },
        {

            id: '4',
            created: 1382387322693,
            updated: '222212',
            ratingID: '3',
            rate: 1,
            ip: '198.168.0.3',
            status: 'Spam'
        }
    ];

    return votes;
}]);

Mein HTML:

  <body ng-controller='VotesCtrl'>
    <div>
    <ul>
        <li class="created">
            <a>CREATED</a>
        </li>
        <li class="ip">
            <b>IP ADDRESS</b>
        </li>
        <li class="status">
            <b>STATUS</b>
        </li>
    </ul>
    <ul ng-repeat="vote in votes" ng-click="setSelected()">
        <li  class="created">
          {{vote.created|date}}
        </li>
        <li class="ip">
            {{vote.ip}}
        </li>
        <li class="status">
            {{vote.status}}
        </li>
    </ul>
   </div>
   </body>

Mein CSS (Nur ausgewählte Klasse):

.selected {
  background-color: red;
}
55
Canttouchit

Jede Zeile hat eine ID. Alles, was Sie tun müssen, ist, diese ID an die Funktion setSelected() zu senden, sie zu speichern (in $scope.idSelectedVote zum Beispiel), und prüfen Sie dann für jede Zeile, ob die ausgewählte ID mit der aktuellen ID übereinstimmt. Hier ist eine Lösung (siehe die Dokumentation für ngClass, falls erforderlich):

$scope.idSelectedVote = null;
$scope.setSelected = function (idSelectedVote) {
   $scope.idSelectedVote = idSelectedVote;
};
<ul ng-repeat="vote in votes" ng-click="setSelected(vote.id)" ng-class="{selected: vote.id === idSelectedVote}">
    ...
</ul>

Plunker

132
Blackhole

Sie möchten wahrscheinlich eher LI als UL mit der Hintergrundfarbe:

.selected li {
  background-color: red;
}

Dann möchten Sie eine dynamische Klasse für die UL haben:

<ul ng-repeat="vote in votes" ng-click="setSelected()" class="{{selected}}">

Jetzt müssen Sie die $ scope.selected aktualisieren, wenn Sie auf die Zeile klicken:

$scope.setSelected = function() {
   console.log("show", arguments, this);
   this.selected = 'selected';
}

und deaktivieren Sie die zuvor markierte Zeile:

$scope.setSelected = function() {
   // console.log("show", arguments, this);
   if ($scope.lastSelected) {
     $scope.lastSelected.selected = '';
   }
   this.selected = 'selected';
   $scope.lastSelected = this;
}

Arbeits lösung:

http://plnkr.co/edit/wq6nxc?p=preview

6
user508994

Ich brauchte etwas Ähnliches, die Möglichkeit, auf eine Reihe von Symbolen zu klicken, um eine Auswahl anzuzeigen, oder eine textbasierte Auswahl, und das Modell (2-Wege-Bindung) mit dem dargestellten Wert zu aktualisieren und auch eine Möglichkeit anzugeben, welche wurde visuell ausgewählt. I hat eine AngularJS-Direktive erstellt dafür, da es flexibel genug sein musste, um mit jedem HTML-Element umzugehen, auf das geklickt wird, um eine Auswahl anzuzeigen.

<ul ng-repeat="vote in votes" ...>
    <li data-choice="selected" data-value="vote.id">...</li>
</ul>

Lösung: http://jsfiddle.net/brandonmilleraz/5fr9V/

3
LightningEater