javascript - 如何将数据动态插入到 ionic 滑盒Angularjs Ionic

我正在使用Ionic框架和Angular js构建新闻应用程序!

我正在使用ng-repeat在ion-slide-box上显示新闻，这是一个示例:

<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>

我想为每张幻灯片动态地将数据插入到我的 ionic 幻灯片框中，所以我正在使用以下代码:

   $scope.slideHasChanged = function(index) {

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

但这似乎无法正常工作，因此，如果您对如何重新使用它有个好主意，那将是很棒的:)

这是CODEPEN + CODE

最佳答案

您需要在$ionicSlideBoxDelegate上调用update方法。 (此外，@ mark-veenstra是正确的，您正在推送字符串而不是对象)。

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'}
];

另外，请确保将滑块的高度设置为:

.slider {
  height: 200px;
}