3

I am using a image slider called ninja slider, which currently works fine using the following html

<div id='ninja-slider'>
    <ul>
        <li><div data-image="https://pbs.twimg.com/profile_banners/402882947/1414953548/1500x500" href="http://www.menucool.com"></div></li>
    </ul>
</div>

However, when I am trying to get the data to come from a web service, it is not playing ball (not displaying any of the data) but I don't know where I am going wrong

 <div id='ninja-slider'>
          <div ng-controller="featCtrl">
            <ul>
                <li> <div ng-repeat="feat in featured" index="{{$index}}" data-image="{{feat.heder_img}}" href="http://www.menucool.com"></div></li>
            </ul>
        </div>
  </div>

With the following in my app.js file

.controller('featCtrl', function($scope, $http) 
{
    $http.get('http://liverpool.li/api/feat/home').
    success(function(data, status, headers, config)
    {
        $scope.featured = data.featured;
    }).
    error(function(data, status, headers, config)
    {});      
})

Am I doing it completely wrong? thanks

BCLtd
  • 1,459
  • 2
  • 18
  • 45
  • 1
    When you want data coming from an API call in a controller to appear instantly it's best using the resolve property on the route for that view/controller, see: https://docs.angularjs.org/api/ngRoute/provider/$routeProvider (resolve property) Your data will be ready before the view/controller is loaded – Robin-Hoodie May 31 '15 at 08:51
  • @BCLtd - Did you get it working? I am also trying the same and it is not working with ng-repeat? How did you get it work? – AngryJS Jul 25 '16 at 06:20

3 Answers3

3

The problem is probably the ninja slider.

Other people have this problem:

ng-repeat list in AngularJS isn't updated when an ajax call changing its value

Try to init the plugin when your ajax call insert data into the $scope.

As I see in the plugin's site this can be hard. Take a look at the docs of the plugin. If you have problem, use slickjs instead, however you have to use jquery for that plugin.

Community
  • 1
  • 1
Luca Colonnello
  • 1,416
  • 12
  • 11
1

Yes, in your code snippet is an error. In respect to the documentation you'd have to iterate over the <li>. You put the ng-repeat inside the <div> which will create multiple <div> elements. However, the documentation says that an image is wrapped inside a <div> which is then wrapped in a <li>. So change your code to the following:

<div ng-controller="featCtrl">
    <div id='ninja-slider'>
        <ul>
            <li ng-repeat="feat in featured">
                <div index="{{ $index }}" data-image="{{ feat.heder_img }}"></div>
             </li>
        </ul>
    </div>
</div>

As you can see I am now iterating over the <li> element. Also you were referencing a scope variable bar but iterate over featured. However each item within the object is represented by feat. Thus you need to access the data from each element by using feat. Also I would think that you slightly need to change your controller because the JSON which gets returned by your $http call contains encoded URIs. You need to transform that by using the decodeURI function:

https:\/\/pbs.twimg.com\/profile_banners\/43128674\/1432932991\/1500x500 will become https://pbs.twimg.com/profile_banners/43128674/1432932991/1500x500

You can use it by passing along the URL like so:

decodeURI(url);

LordTribual
  • 4,219
  • 2
  • 28
  • 38
0

I think you are not doing anything with the ng-repeat. You are not using each of the feat. Maybe if you could do something like

<div id='ninja-slider'>
      <div ng-controller="featCtrl">
        <ul>
            <li> <div ng-repeat="feat in featured" index="{{$index}}" data-image="{{bar.heder_img}}" href="http://www.menucool.com">
                     <div>{{feat}}</div>
            </div></li>
        </ul>
    </div>
</div>

Can you try something like this?

Philip John
  • 5,275
  • 10
  • 43
  • 68
  • Thanks for taking the time, sorry it was a typo in the code I put on stack overflow. i have edited the post now, but it is still the same issue :( – BCLtd May 31 '15 at 08:48
  • 2
    If he use the ninja slider, it binds automatically all data-image in the page, changing the dom. So angular can't fetch the elements in ng-repeat – Luca Colonnello May 31 '15 at 08:50
  • Try adding "feat in featured.data". You are forced to make this to let it work, also, you have to use something like {{feat.myField}}. – AndreaM16 May 31 '15 at 08:53
  • Any update on this? Did anyone get it working ng-repeat with ninja-slider? – AngryJS Jul 25 '16 at 06:23