Randomizing an array inside ng-Repeat
I have an array of objects that I am using ng-repeat to iterate over. However, each object has 2 properties - country (string) and city (array). How can I randomize this array of cities on button click or page refresh. Example:
$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>
NOTE. The button is not required to perform randomization. The button just navigates to the next tree, but the city name has to be reshuffled each time.
source to share
You can apply the function randomize()
to select random city
in cities
:
<ul>
<li ng-repeat="pack in package">
<p>{{pack.country}}</p>
<span>{{randomize(pack)}}</span>
</li>
</ul>
You can try with the following snippet:
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>
source to share
You can use the random function for random data and limitTo
only one random city.
Updated: I have an updated snippet, instead of calling a random function from the page (which will call the function every time the page is refreshed), you can call it on page load and when the next button is called.
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>
source to share