Làm thế nào để chèn dữ liệu tự động vào hộp trượt ion Angularjs Ionic

Question

Tôi đang sử dụng khung Ionic và Angular js để xây dựng một ứng dụng tin tức!

Tôi đang cho thấy những tin tức về ion trượt hộp bằng ng-repeat đây là một ví dụ:

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

Tôi muốn chèn dữ liệu tự động để ion trượt hộp của tôi cho mỗi slide vì vậy tôi đang sử dụng mã này:

$scope.slideHasChanged = function(index) { 

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

nhưng điều này dường như không làm việc đúng vì vậy nếu bạn có một ý tưởng về cách tôi có thể reslove này sẽ là tuyệt vời :)

đây là CODEPEN + CODE

Answer 1

Bạn cần phải gọi phương thức cập nhật trên $ionicSlideBoxDelegate. (Ngoài ra, @ mark-veenstra là chính xác, bạn đang đẩy một chuỗi và không phải là một đối tượng).

Updated CodePen

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

Ngoài ra, hãy chắc chắn rằng bạn cung cấp cho thanh trượt của bạn một chiều cao:

.slider { 
    height: 200px; 
} 

Answer 2

Tôi không hoàn toàn chắc chắn những gì bạn đang cố gắng để đạt được, nhưng nếu bạn muốn mã này để làm việc, chỉ cần thay đổi:

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

Để:

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