CODEWITHSUNDEEP
javascriptangularjs
Thiago Jem
Thiago Jem

Reputation: 167

How to dynamically insert items from a Array for the filter

How do I insert dynamically items from this array to the filter that is in wizard.html page , for when the templateUrl , which is on the route , make the call can be rendered in 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 goal is to avoid having multiple pages with the same structure.

I use the angular-filter for simpler tasks , the hardest do not know how to configure. If you have any other way to do also serves the important thing is to solve this problem.

Upvotes: 0

Views: 75

Answers (2)

Thiago Jem
Thiago Jem

Reputation: 167

After a few days doing tests I managed to fix the filter as wanted.

The angular-filter facilitates the use of filters. Then I used the filterBy: ['href']: and added the pageName, which is the file name used na $routeParams. 

<div ng-controller="NatureCtrl">
 <div ng-repeat="item in grupo = (grupo|filterBy: ['href']:pageName).slice(0, 1)">

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

Upvotes: 0

Shuhei Kagawa
Shuhei Kagawa

Reputation: 4777

Pick the right item in the controller instead of doing so in the template.

$scope.item = $scope.items.filter(function(item) {
  return item.href.indexOf($routeParams.pageName) === 1;
})[0];

And remove the div with ng-repeat.

Upvotes: 1

Related Questions