Verwenden von ng-repeat mit zufälligen

Question

Ich versuche zufällig eine Liste zu generieren, in der jedes Element anklickbar ist.

<ul class="list-group"> 
    <li class="list-group-item" ng-repeat="user in users | orderBy: random" ng-class="user.value && user.color" ng-click="changeValue(user)"> {{user.name}}</li> 
    </ul> 

Also, auf Klick möchte ich es den Wert des Elements und auch die Farbe ändern.

Ich kann schon zufällig die Liste mit der folgenden Funktion generieren:

$scope.random = function() { 

    return 0.5 - Math.random(); 

}; 

Das Problem, das ich mit Blick auf bin, ist, dass, wenn ich ein Listenelement klicken, wird sie zufällig neu ordnen. Ich möchte, dass sie am Anfang zufällig angezeigt werden und dann in der gleichen Reihenfolge bleiben, nachdem ich sie angeklickt habe. Wie kann ich die Neuanordnung vermeiden?

Hier ist ein Plunker mit einem praktischen Beispiel:

DEMO

Danke.

Answer 1

Hallo ich nicht wirklich bekommen, was Sie für diesen Wert Eigenschaft verwenden möchten, aber das wird die meisten Ihrer Probleme lösen:

index.html

<li class="list-group-item" ng-repeat="user in users" ng-class="user.value && user.color" ng-click="changeValue(user)"> {{user.name}}</li> 

script.js

angular.module("demo", []); 

angular 
    .module("demo") 
    .controller("demoController", ["$scope", function($scope) { 
    $scope.users = shuffleArray([{ 
     name: "John", 
     age: 22, 
     value: false, 
     color: "green" 
    }, { 
     name: "Leo", 
     age: 54, 
     value: false, 
     color: "blue" 
    }, { 
     name: "Matt", 
     age: 35, 
     value: false, 
     color: "red" 

    }]); 
    function shuffleArray(array){ 
     for (var i = array.length - 1; i > 0; i--) { 
      var j = Math.floor(Math.random() * (i + 1)); 
      var temp = array[i]; 
      array[i] = array[j]; 
      array[j] = temp; 
     } 
     return array; 
    } 


    $scope.changeValue = function(obj){ 
     obj.value = !obj.value; 
    }; 



    }]) 

bestellen hier: https://plnkr.co/edit/i9YDktypVqEl7BJ9GNEr?p=preview

Answer 2

Ok sorry, ich könnte über diese dies in meiner ersten Antwort kompliziert sollte es tun - binden sie nur einmal in html:

<li class="list-group-item" ng-repeat="user in ::users | orderBy: random" ng-class="user.value && user.color" ng-click="changeValue(user)"> {{user.name}}</li> 

https://plnkr.co/edit/fp3UTn7CLql3zCT9EzBU?p=preview