如何动态地插入数据离子滑动盒Angularjs离子 [英] How to insert data dynamically to ion-slide-box Angularjs Ionic

问题描述

我使用离子框架和角JS打造的新闻应用程序！

I'm using Ionic framework and Angular js to build a news app !

我展示采用NG-重复这里离子滑动盒的消息是一个例子：

I'm showing the news on ion-slide-box using ng-repeat here is an example :

<ion-slide-box on-slide-changed="slideHasChanged($index)" show-pager="true" ng-if="items" >
  <ion-slide  ng-repeat="i in items">   
           <h4>{{i.name}}</h4>       
<p>{{i.gender}}</p> 
    <p>{{i.age}}</p>
</div> 
  </ion-slide>
    </ion-slide-box>

我想，所以我用这个code动态插入数据，以我的离子滑框每张幻灯片：

I want to insert data dynamically to my ion-slide-box for each slide so I'm using this code :

   $scope.slideHasChanged = function(index) {

          $scope.items.push("{name:'John', age:25, gender:'boy'}");
      }

不过这似乎并没有工作的权利，所以如果你对我怎么能reslove这一点，将是巨大的一个想法：）

but this doesn't seem to work right so if you have an idea on how can I reslove this that would be great :)

这里是 codePEN + code

推荐答案

您需要调用Update方法上的 $ ionicSlideBoxDelegate 。 （另外，@标记veenstra是正确的，你推一个字符串，而不是一个对象）。

You need to call the update method on $ionicSlideBoxDelegate. (Also, @mark-veenstra is correct, you're pushing a string and not an object).

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope, $ionicSlideBoxDelegate) {
  $scope.items=friends;

  $scope.slideHasChanged = function() {
    $scope.items.push({name:'John', age:25, gender:'boy'});
    $ionicSlideBoxDelegate.update();
  };

});

var friends = [
  {name:'John', age:25, gender:'boy'},
  {name:'Jessie', age:30, gender:'girl'},
  {name:'Johanna', age:28, gender:'girl'},
  {name:'Joy', age:15, gender:'girl'},
  {name:'Mary', age:28, gender:'girl'}
];

此外，请确保您给您的滑块的高度：

Also, make sure that you give your slider a height:

.slider {
  height: 200px;
}

这篇关于如何动态地插入数据离子滑动盒Angularjs离子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！