Отображение элементов ng-repeat в случайном порядке

Question

Я использую радиокнопки, чтобы дать ответы на вопрос, и их нужно отображать в произвольном порядке, чтобы правильный ответ не всегда находился в одном и том же месте.

При использовании orderBy, чтобы поместить их в случайном порядке, они будут меняться при каждом нажатии одной из переключателей, как я могу предотвратить их переупорядочение, или есть лучший способ отображения переключателей случайно?

HTML

<div ng-controller="MyCtrl"> 
    <div ng-repeat='n in list | orderBy:random'> 
    <label> 
     <input type='radio' ng-model='abc.ans' value='{{n}}'> 
     {{n}} 
    </label> 
    </div> 
    <p> 
    {{abc.ans}} 
    </p> 
</div> 

JS

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

function MyCtrl($scope) { 
    $scope.abc = {}; 
    $scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; 
    $scope.random = function() { 
     return 0.5 - Math.random(); 
    } 
} 

JSFiddle демонстрирует проблему здесь: http://jsfiddle.net/o041kp7p/

Answer 1

Вот решение:

http://jsfiddle.net/o041kp7p/1/

function MyCtrl($scope) { 


$scope.abc = {}; 
    $scope.abc.ok = 'wat'; 
    // you have to store values in an object (to add a column '_order') 
    $scope.list = [ 
     { 'value' : 'a'}, 
     { 'value' : 'b'}, 
     { 'value' : 'c'}, 
     { 'value' : 'd'}, 
     { 'value' : 'e'}, 
     { 'value' : 'f'}, 
     { 'value' : 'g'}]; 


    // the list of indexes you can pick in (to generate the '_order') 
    var list_index = [0, 1, 2, 3, 4, 5, 6]; 

    // affect 1 index to each element 
    var j = 0; 
    while(list_index.length > 0) { 
     var i = Math.floor(list_index.length * Math.random()); 
     if(i >= list_index.length) 
     i --; 

     var val = list_index.splice(i, 1); 
     $scope.list[j]._order = val[0]; 
     j ++; 
    } 
} 

Хитрость заключается в том, чтобы:

• магазин столбец «_order» в элементах вы заказываете
• рандомизации раз их индекс
• использовать этот столбец «_order» в OrderBy.

Answer 2

Решение проблемы. Просто нужно небольшое изменение. У вас проблемы, потому что список сортируется каждый раз при изменении значения модели. http://jsfiddle.net/himanshu1691/o041kp7p/4/

HTML:

<div ng-controller="MyCtrl" > 
    <div ng-repeat='n in list' > 
    <label> 
     <input type='radio' ng-model='abc.ans' value='{{n}}'> 
     {{n}} 
    </label> 
    </div> 
    <p> 
    {{abc.ans}} 
    </p> 
</div> 

JS:

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

function MyCtrl($scope , orderByFilter) { 
     $scope.abc = {}; 
    $scope.abc.ok = 'wat'; 
    $scope.list = ['a', 'b', 'c', 'd', 'e', 'f', 'g']; 
    $scope.random = function() { 
     return 0.5 - Math.random(); 
    } 
    $scope.list = orderByFilter($scope.list,$scope.random); 

} 

Этот список путь в случайном порядке сортируются только один раз во время загрузки контроллера.

Answer 3

Итак, логика идет следующим образом:

1. получить длину исходного массива говорят «НУМС [] длину.».
2. генерировать случайный индекс до длины массива nums [].
3. проанализировать массив (num [random index]). нажмите элемент на второй массив, скажем 'arr []', если элемент еще не существует в arr [].

PS: работает для массива с уникальными элементами. Эффективный способ случайного разбора массива JSON.

$scope.nums=['1','2','3','4','5']; 
 
$scope.arr=[]; 
 
console.log($scope.nums.length+" "+$scope.arr.length); 
 
var a=$scope.nums.length; 
 
var b=$scope.arr.length; 
 
while(a>b) 
 
{ console.log("inside while"); 
 
    $scope.randvar=Math.floor(Math.random() * a); 
 
    console.log("randvar"+$scope.randvar) 
 
    if($scope.arr.indexOf($scope.nums[$scope.randvar])<0) 
 
    { 
 
     console.log("inside if"+$scope.arr.indexOf($scope.arr[$scope.arr])); 
 
     console.log("array elem"+$scope.nums[$scope.randvar]); 
 
     $scope.arr.push($scope.nums[$scope.randvar]); 
 
     b=$scope.arr.length; 
 
     console.log("push successful") 
 
    } 
 
} 
 
for(var i=0;i<$scope.arr.length;i++) 
 
{ 
 
    console.log($scope.arr[i]+" "); 
 
}