How can I dynamically insert items from an array into the filter on the wizard.html page, so that when the templateUrl in the route is called, it can be rendered on the wizard.html page?
Controller
angular.module('tareasApp')
.controller('NatureCtrl', function ($scope, $routeParams) {
$scope.pageName = $routeParams.pageName;
$scope.items =[
{
href:'/sound-waves',
img:'waves.jpg',
video:'//www.youtube.com/watch?v=OG2eGVt6v2o',
description:'Those Relaxing Sounds of Waves'
},
{
href:'/nature-relaxing-sound',
img:'ocean.jpg',
video:'//www.youtube.com/watch?v=SWR0GdC7_40',
description:'Nature Sounds Relaxing Ocean Sounds'
}
];
});
Page wizard.html
<div ng-controller="NatureCtrl">
<div ng-repeat="item in items | filterBy: ['href']: ''Insert here , dynamically , the items of array correspondent the accessed page" >
<img ng-src="images/{{ item.img }}" width="400" height="200" >
<p>{{item.description}}</p>
<iframe width="655" height="400" ng-src="{{ item.video }}" frameborder="0" allowfullscreen></iframe>
</div>
</div>
Route
angular.module('tareasApp')
.config(function ($routeProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$routeProvider
.when("/:pageName", {
templateUrl: "views/wizard.html",
controller: "NatureCtrl"
})
.otherwise({
redirectTo: '/'
});
});
The aim is to prevent duplicate pages with the same structure.
I am using angular-filter for basic tasks, but need help with configuring more complex tasks. Any alternative solutions are welcome as long as they solve the issue at hand.