Javascript 在ng重复序列中随机化数组

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

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

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

{{pack.country}

{{pack.cities}


下一个国家

---

注意：不要求按钮进行随机分组。该按钮只跳到下一张国家/地区幻灯片，但城市名称每次都应该被洗牌。

您可以应用

随机化（）

函数在

城市中随机选择
城市
：

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




{{pack.country}

{{随机化（打包）}


您可以对随机数据使用随机函数，对一个随机城市使用
limito

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


var myApp=angular.module（'myApp'，[]）；
函数MyCtrl（$scope）{
$scope.random=函数（）{
返回Math.random（）；
}
$scope.package=[{
国家：'瑞典'，
城市：['aaa'，'bbb'，'ccc']
}, {
国家：'苏丹'，
城市：['xxx'，'yyy'，'zzz']
}]
函数GeneratorDOM（）{
角度.forEach（$scope.package，function（国家/地区）{
country.random=country.cities[Math.floor（Math.random（）*country.cities.length）]；
})
}
$scope.showNext=函数（）{
generateradom（）；
//显示下一张幻灯片，但随机化城市
}
generateradom（）；
}



{{pack.country}

{{pack.random}


下一个国家
表示城市每次都应该以不同的顺序显示，如（aaa、bbb、ccc或bbb、ccc、aaa或aaa、ccc、bbb等）？由于城市是一个数组，我无法将其放入到html中。这样做的城市[0]将始终是数组中的第一个城市。所以我希望[]中的值是随机的（这里是0或1，因为只有2个元素）。嗨，谢谢你的回答。我确实做了
{{city in pack.cities | orderBy:randomize}}
但是它给了我一个“in”的语法错误，谢谢。这绝对是正确的方法：））我遇到了一个小问题，因为我异步获取这些包，而城市实际上是图像
，因此，{}内的值没有被评估。尝试将随机化函数放入承诺中，但效果不理想建议：
randomize
可以将显示的城市保存在范围中（
$scope.country.displated=country.cities[Math.floor（Math.random（）*country.cities.length）]；
。在
中为每个国家都调用它。然后，
您的承诺的结果。如果您使
Show console
为真，则有时它会给出摘要错误。有时，您的代码中断：
“消息”：“错误：[$rootScope:infdig] http://errors.angularjs.org/1.2.23/$rootSco…
。这个错误似乎在所有情况下都会发生在我身上。应用程序仍然可以正常工作，但只是急于看到无限摘要错误：）谢谢manshi的回答。今天了解了
limito
today:））嗨，我已经更新了代码片段，请检查。而且现在你不会得到任何错误。在Mistalis代码中，如果你将
Show console
设置为true，那么它将给出错误。
<ul>
  <li ng-repeat="pack in package">
    <p>{{pack.country}}</p>
    <span>{{randomize(pack)}}</span> 
  </li>
</ul>