how to slide images in angular js?

Question

I am trying to slide image in angular js + ionic .Please check below image

on left side there is three image which should be slide by user as same in carousel data. it is in small portion of left side. so I used in that .using this user slide the images.could you please tell me why my images not sliding .?Actually I am getting data from son file and using ng-repeat I am making ion-slide.could you please tell how to achieve this ?

here is my code http://plnkr.co/edit/aXHsnZUnJ2FTHq8LAr2t?p=preview

<html ng-app="ionicApp">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Pull to Refresh</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="script.js"></script>

</head>
<style>
    .logo {
        width: 30px;
        height: 44px;
        top: 0px;
        margin: 0px;
        padding: 0px;
        float: left;
        position: absolute;
        left: 5em;
    }
    #header{
              border-bottom: 1px solid gray;

    }

    .barTab {
        float: right;
        right: 3em;
        position: absolute;
        padding-top: 0.4em;
    }

    .barTab a {
        margin: 0.4em;
    }

    .barTab a#contactus {
        color: black;
    }

    #wrapper {
        margin-left: 5em;
        margin-right: 5em;
        margin-top: 1em;
    }
    #slideTest{
      margin-top:1em;
      border:1px solid pink
    }
</style>

<body ng-controller="MyCtrl">

    <ion-header-bar class="bar-assertive">

        <img src="https://dl.dropboxusercontent.com/s/bt3rzcwpe80r6fs/sapient-logo.png?dl=0" class="logo">

        <div class="barTab">
            <a>Home</a>
            <a>About us</a>
            <a>Projects</a>
            <a id="contactus">Contact Us</a>
        </div>
    </ion-header-bar>

    <ion-content>
        <div id="wrapper">
            <div id="header">
                <h1> Contact us</h1>
            </div>
            <div id="slideTest">
                <ion-slide-box active-slide="myActiveSlide">
                    <ion-slide ng-repeat ="n in success">
                        <img src="{{n.image}}">
                    </ion-slide>

                </ion-slide-box>

            </div>
        </div>
    </ion-content>

</body>

</html>

Answer 1

inject $ionicSlideBoxDelegate to your controller and call $ionicSlideBoxDelegate.update() after $scope.success

.controller('MyCtrl', function($scope,$http, $ionicSlideBoxDelegate) {
  $scope.myActiveSlide = 1;
  $scope.success=[];
  $http.get('defult.json').success(function(data){
    $scope.success=data;
    $ionicSlideBoxDelegate.update()
    console.log(data)
  }).error(function(data){

  })

});

how to slide images in angular js?

Question

1 answers

solution1
0 ACCPTED 2015-07-04 19:39:13

how to slide images in angular js?

Question

1 answers

solution1 0 ACCPTED 2015-07-04 19:39:13

solution1
0 ACCPTED 2015-07-04 19:39:13