隨機使用ng-repeat

我試圖隨機生成一個列表，其中每個項目都是可點擊的。隨機使用ng-repeat

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

所以，點擊我希望它改變項目的價值和顏色。

我已經可以隨機生成具有以下功能列表：

$scope.random = function() { 

    return 0.5 - Math.random(); 

};

我現在面臨的問題是，每當我點擊列表項，它們隨機地重新安排。我希望它們在開始時隨機顯示，然後在點擊它們之後保持完全相同的順序。我怎樣才能避免重新安排？

這裏有一個實際的例子一個plunker：

DEMO

謝謝。

來源

2017-09-18 N.Car

您好我並沒有真正得到你想要使用該值屬性是什麼，但是這將解決大部分的問題：

的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; 
    }; 



    }])

檢查在這裏： https://plnkr.co/edit/i9YDktypVqEl7BJ9GNEr?p=preview

來源

2017-09-18 23:55:32 pegla

當用戶點擊列表，它應該不是隨機的。他只需要一次隨機名稱，而不是當用戶單擊列表時。 – jParmar

該值用於觸發顏色。如果用戶點擊它，則變爲true並且該類變爲活動狀態，如果用戶再次單擊該值變爲false，並且該類變爲非活動狀態。從剛剛發送的垃圾郵件中，它不斷重新安排每次點擊的順序。這正是我想要避免的。謝謝你的回答:) –

我的壞我不明白問題抱歉，我編輯答案並修復它。 – pegla

好對不起，我可能有過在我的第一個答案複雜，這本應該做的 - 在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

來源

2017-09-19 00:08:25 pegla

謝謝！不知道綁定的「::」只有一次。我還在學習。謝謝你的時間和回答:) –

你能快速瀏覽一下嗎？ https://plnkr.co/edit/MfKHbP5Ng3YCZ8LWOvNF?p=preview 最新的區別是什麼？我也做了它只綁定一次，但它不斷重新排列 –

你有無限的摘要循環問題，檢查你的控制檯錯誤，你會發現那裏的信息。 – pegla

隨機使用ng-repeat

回答

相關問題