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

诀窍是：

存储专栏＆＃39; _order＆＃39;在您要订购的元素中
将其索引随机化
使用该列＆＃39; _order＆＃39;在订单中。

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

好的，所以逻辑如下：

获取原始数组的长度，说'nums []。长度＆＃39;。
生成随机索引，直到数组的长度为[]。
解析数组（num [random index]）。如果arr []中不存在该元素，请将该元素推送到第二个数组，例如＆＃39; arr []＆＃39 ;.

PS：适用于具有独特元素的数组。随机解析JSON数组的有效方法。

＆＃13;

$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]+" ");
 }

＆＃13;

以随机顺序显示ng-repeat项目

3 个答案: