Как динамически вставлять данные в Ion-slide-box Angularjs Ionic
Я использую Ionic framework и Angular js для создания новостного приложения !
Я показываю новости на ION-slide-box с помощью ng-repeat вот пример:
<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>
Я хочу динамически вставлять данные в мой Ion-slide-box для каждого слайда, поэтому я использую этот код:
$scope.slideHasChanged = function(index) {
$scope.items.push("{name:'John', age:25, gender:'boy'}");
}
но это, похоже, не работает правильно, поэтому, если у вас есть идея о том, как я могу это перелюбить, это было бы здорово:)
здесь CODEPEN + КОД
2 ответов
вам нужно вызвать метод update на $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;
}
Я не совсем уверен, что вы пытаетесь достичь, но если вы хотите, чтобы этот код работал, просто измените:
$scope.items.push("{name:'John', age:25, gender:'boy'}");
в:
$scope.items.push({name:'John', age:25, gender:'boy'});