Question

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

我在这里使用ng-repeat显示离子幻灯片盒上的新闻就是一个例子：

/lib/modules/<kernel-version>/build

我想动态地将数据插入每张幻灯片的离子幻灯片框中，以便我使用此代码：

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

但是这似乎没有用，所以如果你有一个想法，我怎么能重新开始，这将是伟大的：）

这里是CODEPEN + CODE

Answer 1

您需要在$ionicSlideBoxDelegate上调用更新方法。（另外，@ 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;
}

Answer 2

我不完全确定您要实现的目标，但如果您希望此代码有效，请更改：

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

要：

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

如何动态插入数据到离子滑动盒Angularjs Ionic

2 个答案: