AngularJS show 2 random records

Question

I just started up learning AngularJS and I have no idea how to solve this problem. For example I have 4 records (car, plane, ship, train) and I only want to show 2 randomly in ng-repeat.

Examples: 1.st. plane, ship 2.nd. car, train 3.rd. train, plane

So how would syntax look like ?

JS:

app.controller('WorkCtrl', function($scope, $http) {

    $http.get('work.json').success(function(work) {

        $scope.work = work;

    });
});

HTML:

<div class="work" ng-controller="WorkCtrl">
    <ul class="grid">
        <li ng-repeat="work in work">
            <a href="@{{ work.link }}" target="blank_">
               <div class="background"></div>
               <h3 class="name">@{{ work.name }}</h3>
               <p class="description">@{{ work.description }}</p>
               <img ng-src="@{{ work.image_path }}">
            </a>
        </li>
    </ul>
</div>

Please provide the sample code that demonstrate your problem. — Samuel Shen, Nov 13 '14 at 18:04
yes, please show your code. My suggestion would be to write a filter which takes an input array, and returns an array of 2 items randomly selected from the array. — SoluableNonagon, Nov 13 '14 at 18:06
@EliteOctagon If you make a filter with random values you'll end up with an infinite $digest loop. filters should be idempotent, see this: http://stackoverflow.com/questions/23939146/non-idempotent-filter-causing-infinite-digest-error — Ilan Frumer, Nov 13 '14 at 18:11
@IlanFrumer I tried this and it seemed to work http://plnkr.co/edit/mJ5Q7n24uLnELSNPUB9z?p=preview, but now I can't seem to load it... infinite loop? — SoluableNonagon, Nov 13 '14 at 18:18
http://embed.plnkr.co/mJ5Q7n24uLnELSNPUB9z/script.js viewing works fine — SoluableNonagon, Nov 13 '14 at 18:20
@EliteOctagon You should know this term from the HTTP protocol: http://restcookbook.com/HTTP%20Methods/idempotency/ — Ilan Frumer, Nov 13 '14 at 18:24
Thanks @IlanFrumer , I actually didn't know the term, but I know the definition. I can see how this would mess with the watcher set on the object. — SoluableNonagon, Nov 13 '14 at 18:27
@ewing1990 How often you need to re - randomize the list? what is the trigger? — Ilan Frumer, Nov 13 '14 at 18:56

score 0 · Answer 1 · answered Nov 13 '14 at 18:23

I created something like this:

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

app.controller('myCtrl', ['$scope', function($scope){

  $scope.records = ['plane', 'train', 'car', 'submarine'];

}]); 

app.filter('randomSelection', function(){
  return function(inputArray, numItemsToReturn){
    // assuming you pass an array, not doing checking here
    if(!inputArray)
      return inputArray;

    var numItems = inputArray.length;
    var min = 0;
    var max = numItems-1;
    var random = Math.floor(Math.random() * (max - min + 1)) + min;

    while (inputArray.length > numItemsToReturn){
      inputArray.splice(random, 1);
    }

    return inputArray;
  };
});

HTML:

<div ng-repeat="record in records | randomSelection : 2"> 
    {{record}}
</div>

Seems to work, no infdigest loop. You may want to add another condition in the while loop to break out so as to avoid an infinite loop.

http://embed.plnkr.co/mJ5Q7n24uLnELSNPUB9z/script.js

Big thnx for fast response, it works fine and it's just what I needed. — ewing1990, Nov 13 '14 at 18:25
as Ilan Frumer suggests, this is not a good approach as we are watching an object with ng-repeat and then modifying it with a filter. If you look at the console, you'll see that it is fired multiple times, getting inconsistent results... but if it works for you... — SoluableNonagon, Nov 13 '14 at 18:29
@EliteOctagon as I said the rule: filters must be idempotent — Ilan Frumer, Nov 13 '14 at 18:40

zs2020 · Accepted Answer · 2014-11-13T18:32:51.213

-2

<div ng-repeat="w in work = (work|orderBy:randomize).slice(0, 2)">

$scope.randomize = function () {
    return 0.5 - Math.random();
};

Demo: http://jsfiddle.net/hmx2zqex/

edited Nov 13 '14 at 18:32

answered Nov 13 '14 at 18:25

zs2020

53,766
29
154
219

Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting! – Ilan Frumer Nov 13 '14 at 18:29
It only rewrites the array and deletes all the values except two random values. – Ilan Frumer Nov 13 '14 at 18:35
Why is that a problem? It won't modify the model and since other values will not be used in the template, nothing is broken. – zs2020 Nov 13 '14 at 18:59

AngularJS show 2 random records

2 Answers2