0

I've got an array of objects that I would like to display in a scrollable window using an ng-repeat like structure in angular. So far I'm working with Angular UI's utils scroll bar.

I've read through the read me and have also read through this example given from this answer on a previous question on stack overflow. So in my code this is what I have currently, and it gives no errors when it runs, and it also doesn't display anything.

In my module definition: 

var app = angular.module('PromoUI', ['ngRoute', 'angularUtils.directives.dirPagination', 'ui.bootstrap','ui.scroll','ui.scroll.jqlite'])

In my controller:

    $scope.datasource = {
        get: function (index, count, success) {
            success($scope.discounts)
        }
    }

In my view: 

    {{discounts[0].PromoCode}}
    <div ui-scroll-viewport style="height:300px">
      <div ui-scroll="discount in datasource">
        <p>{{discount.PromoCode}}</p>
        <p>{{discount.DiscountDescription}}</p>
      </div>
    </div>

(note above that {{discounts[0].PromoCode}} displays correctly in the browser)

And my references are correct:

  <!--ANGULAR UI-->
  <script src="../Scripts/angular-ui/ui-utils.js"></script>

I have a feeling I'm not setting up the datasource correctly. Could anyone out there who has used this directive give me a hand?

Community
  • 1
  • 1
Patrick Motard
  • 2,650
  • 2
  • 14
  • 23

1 Answers1

0

I think that what you have there may work as well, but I've set it up as follows:

app.factory('datasource', ['$timeout', function($timeout) {
      var a = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k'];
      var get = function (index, count, success) {
            return success(a);
        };
        return {
            get: get
        };
    }
]);

I have plnkr with this at http://plnkr.co/edit/W8Mzee

Ilantoren
  • 1
  • I forgot to mention that your datasource compiles with page load so if the $scope.discounts is not defined then, you will not see a thing. – Ilantoren Mar 01 '15 at 05:56