Ändern der Farbe eines div auf ng-klicken und zurücksetzen der rest alle in Ihren normalen Farben

Ich versuche, ändern Sie die Farbe eines div auf click der ng-click. Ich habe getan, die Hälfte der Arbeit. Ich bin in der Lage, schalten Sie die Farbe der div, wenn geklickt, aber ich brauche alle anderen divs, um wieder Ihre ursprüngliche Farbe. Es sollte nicht mehr als ein div, dass ist nicht seine ursprüngliche Farbe.

HTML-code-

<div ng-controller="MyCtrl">
    Hello, {{name}}!
    <div ng-init="item.isyellow = false" ng-repeat="item in realName" 
         ng-class="{yellow : item.isyellow}"  ng-class-odd="'odd'" ng-class-even="'even'" 
         ng-click="item.isyellow =!item.isyellow"  style="cursor:pointer">
        {{item.id}}
        {{item.name}}
    </div>
</div>

CSS-

.odd{
    background-color:white;  
}
.even{  
     background-color:grey;
}
.yellow{
     background-color:yellow;
}

Js-

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

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},{"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];   
}

Demo auf JsFiddle

InformationsquelleAutor RHUL | 2015-09-12

  1. 1

    Können Sie verwenden, die ng-repeat-varaible $index, und verwenden Sie es, wählen Sie die Zeile.

    Überprüfen Sie diese arbeiten : demo

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A"},{"id":2,"name":"B"},    {"id":3,"name":"c"},{"id":4,"name":"D"},{"id":5,"name":"E"},{"id":6,"name":"F"}];

    $scope.colorRow = function(index){
        $scope.row = index;
    }    

}

    HTML :

    <div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" ng-class="{yellow : $index == row}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="colorRow($index)"  style="cursor:pointer"  >
        {{item.id}}
        {{item.name}}
    </div>
</div>

    InformationsquelleAutor Moncef Hassein-bey

  2. 0

    Ich habe eine funktionierende Geige hier. Im Grunde müssen Sie nur Ihre ng-klicken Sie auf, um eine Funktion auszuführen, wechselt die Farbe für das Element ausgewählt wurde, und dann hebt die Auswahl aller anderen Elemente. Wenn Sie nicht möchten, fügen Sie die "select" - Feld, wie ich es Tat, um Ihre Daten, Sie könnten dies tun, indem in die $index-Wert von ng-repeat.

    http://jsfiddle.net/stephen_hartzell/h72ej0rL/

    <div ng-controller="MyCtrl">
  Hello, {{name}}!

    <div ng-repeat="item in realName" ng-class="{yellow : item.selected}"  ng-class-odd="'odd'" ng-class-even="'even'" ng-click="selectItem(item)"  style="cursor:pointer" >
    {{item.id}}
    {{item.name}}
</div>

    JavaScript:

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

//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});

function MyCtrl($scope) {
    $scope.name = 'Superhero';
    $scope.realName=[{"id":1,"name":"A","selected":false},    {"id":2,"name":"B","selected":false},{"id":3,"name":"c","selected":false},{"id":4,"name":"D","selected":false},{"id":5,"name":"E","selected":false},{"id":6,"name":"F","selected":false}];


$scope.selectItem = function(selectedItem){
    for(var i = 0; i < $scope.realName.length; i++){
        var item = $scope.realName[i];
        if(item.id == selectedItem.id){
            item.selected = !item.selected;
        }else {
            item.selected = false;
        }
    }
}
}

    InformationsquelleAutor Stephen Hartzell

  3. 0

    Ich denken kann zwei Ansätze:

    Ansatz 1

    Ändern Sie Ihre ng-click um eine Funktion aufzurufen, die in einer Schleife durch das array von realName und manuell zurückgesetzt werden alle anderen Objekte. Dies ist nicht der effizienteste Ansatz, aber es wird nicht erfordern viel refactoring. 

    <div ng-init="item.isyellow = false" ng-repeat="item in realName" 
     ng-click="toggleItemAndResetOthers(item)">
    {{item.id}}
    {{item.name}}
</div>

    Javascript-Funktion

    $scope.toggleItemAndResetOthers = function (item ) {
    $scope.realName.forEach(function (name) {
        if (name == item)
            name.isyellow = !name.isyellow;
        else
            name.isyellow = false;
    });
}

    Ansatz 2

    Es klingt wie Sie wirklich mehr daran interessiert, in der Hervorhebung eines ausgewählten Objekts. Also statt der manuellen Aktualisierung jedes Objekt, könnten Sie stattdessen weisen Sie auf ein separates Objekt namens selectedObject und haben gerade Ihre ng-class prüfen, ob die item == selectedObject. Diese änderungen, wie Sie behandeln die Objekte im array, so könnte es nicht passen, den rest Ihres vorhandenen code. Aber basierend auf dem, was Sie fordern, ich denke, das ist ein sauberer Ansatz.

    <div ng-repeat="item in realName" 
     ng-class="{yellow : item == selectedObject}" 
     ng-click="selectItem(item)">
    {{item.id}}
    {{item.name}}
</div>

    Javascript

    $scope.selectedObject = {};

$scope.selectItem = function (item) {
    if ($scope.selectedObject == item) //reference equality should be sufficient
        $scope.selectedObject = {}; //de-select if the same object was re-clicked
    else
        $scope.selectedObject = item;
};

    Sehen die Gabel-demo für diesen Ansatz.

    InformationsquelleAutor ryanyuyu

Schreibe einen Kommentar