как скользить изображения в угловых JS?

Question

как скользить изображения в угловых JS?

0

Я пытаюсь скользить изображение в угловой js + ионный. Пожалуйста, проверьте изображение ниже.

на левой стороне есть три изображения, которые должны быть скользкими пользователем как таковые в карусельных данных. он находится в небольшой части левой стороны. поэтому я использовал это, используя этот пользователь для слайд-изображений. Не могли бы вы рассказать мне, почему мои изображения не сдвинутся. Фактически, я получаю данные от файла son и используя ng-repeat. Я делаю ion-slide. Не могли бы вы рассказать, как для достижения этой цели?

вот мой код 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>

Shruti 04 июль 2015, в 20:26

Источник

Теги:

javascript

ionic-framework

angularjs

css3

angularjs-scope

1 ответ

Ещё вопросы

Sappy Goofy · Accepted Answer · 2015-07-04T16-47-00.000Z

введите $ionicSlideBoxDelegate в ваш контроллер и вызовите $ionicSlideBoxDelegate.update() после $ 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){

  })

});

не могли бы вы использовать плункер