在 ng-Repeat 中随机化一个数组

Question

我有一个对象数组，我使用 ng-repeat 对其进行迭代。但是，每个对象都有 2 个属性 - 国家（字符串）和城市（数组）。如何在某些按钮单击或页面刷新时随机化这组城市。一个例子：

$scope.package = [{
  country: 'Sweden',
  cities: ['aaa', 'bbb']
}, {
  country: 'Sudan',
  cities: ['yyy', 'zzz']
}]

$scope.showNext = function() {
  // shows next slide but randomize the cities
}

<ul>
  <li ng-repeat="pack in package">
    <p>{{pack.country}}</p>
      <span>{{pack.cities}}</span> <!-- cities should be random value from the array -->
  </li>
</ul>
<button ng-click="showNext()"> Next Country </button>

注意：按钮不需要随机化。按钮只是跳到下一张国家幻灯片，但每次都应该改变城市名称。

Answer 1

您可以对随机数据使用 random 函数，而 limitTo 只能对一个随机城市使用。

更新： 我已经更新了 sn-p，而不是从页面调用随机函数（每次刷新页面时都会调用函数），您可以在页面加载和调用下一步按钮时调用它。

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

function MyCtrl($scope) {
  $scope.random = function() {
    return Math.random();
  }
  $scope.package = [{
    country: 'Sweden',
    cities: ['aaa', 'bbb', 'ccc']
  }, {
    country: 'Sudan',
    cities: ['xxx', 'yyy', 'zzz']
  }]

  function generateRandom() {
    angular.forEach($scope.package, function(country) {
      country.random = country.cities[Math.floor(Math.random() * country.cities.length)];
    })
  }
  $scope.showNext = function() {
    generateRandom();
    // shows next slide but randomize the cities
  }
  generateRandom();

}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <div ng-controller="MyCtrl">
    <ul>
      <li ng-repeat="pack in package">
        <p>{{pack.country}}</p>
        <span>{{pack.random}}</span>
        <!-- <span>{{pack.cities|orderBy:random|limitTo:1}}</span> -->
        <!-- cities should be random value from the array -->
      </li>
    </ul>
    <button ng-click="showNext()"> Next Country </button>
  </div>
</div>

Answer 2

您可以应用randomize() 函数在cities 中随机选择一个city：

<ul>
  <li ng-repeat="pack in package">
    <p>{{pack.country}}</p>
    <span>{{randomize(pack)}}</span> 
  </li>
</ul>

你可以试试下面的sn-p：

function MyCtrl($scope) {
    $scope.package = [
        {country: 'Sweden', cities: ['aaa', 'bbb']}, 
        {country: 'Sudan', cities: ['yyy', 'zzz']}
    ];

    $scope.randomize = function(country) {
        return country.cities[Math.floor(Math.random() * country.cities.length)];
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app ng-controller="MyCtrl">
  <ul>
    <li ng-repeat="pack in package">
      <p>{{pack.country}}</p>
      <span>{{randomize(pack)}}</span> 
    </li>
  </ul>
</div>