Clever Geek Handbook

NG-Repeat - Doesn't work in the list (ninja image slider)

I am using an 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 try to get data from the web service, it doesn't play ball (doesn't display any 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>

My app.js file says the following:

.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? thank

+3


source to share


3 answers


The problem is probably the ninja slider.

Other people have this problem:

ng-repeat list in AngularJS doesn't update when ajax call changes its value



Try to run the plugin when your ajax call inserts data into the $ scope.

As I can see on the plugin it can be tricky. Take a look at the plugin docs. If you have problems use slickjs instead, however you need to use jquery for this plugin.

+3


source


Yes, there is a bug in your code snippet. As far as documentation is concerned, you'll have to iterate over the value <li>

. You put ng-repeat

inside <div>

that will create multiple elements <div>

. However, the documentation says that the image is wrapped internally <div>

, which is then wrapped in <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 element <li>

. Also you referenced a scope variable bar

, but iterated over it featured

. However, every element in the object is represented feat

. Thus, you need to access data from each item using feat

. Also I would think that you need to change your controller a little, because the JSON that is returned by your call $http

contains the encoded URIs. You need to convert this with a function decodeURI

:



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 going to the url like this:

decodeURI(url);

+1


source


I guess you are not doing anything with ng-repeat. You don't use each of the feat

. Maybe if you can 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?

0


source






More articles:


All Articles