How to dynamically insert items from a Array for the filter

Question

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.

After a few days doing tests I managed to fix the filter as wanted: <div ng-repeat="item in grupo = (grupo|filterBy: ['href']:pageName).slice(0, 1)"> — Thiago Jem
– Thiago Jem, Commented Mar 4, 2015 at 3:35

Shuhei Kagawa · Accepted Answer · 2015-02-26 11:59:31Z

1

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.

answered Feb 26, 2015 at 11:59

Shuhei Kagawa

4,7771 gold badge35 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Thiago Jem Over a year ago

Wow! You are smart ! Worked very well. Now I'll do some tests and then return ...

Thiago Jem Over a year ago

The first controller operates normally , those below are being influenced and do not work . Do you know any way to solve this?

Shuhei Kagawa Over a year ago

What do you mean by 'do not work'? Nothing is shown or the first page is kept shown? And what are the exact page names that you use?

Thiago Jem Over a year ago

In folder controllers I have 5 files js: humor.js, main.js, promissor.js, quadrinhos.js end terra.js, the pages that are under the control of humor.js are functioning normally, both principal and articles. The main pages that are up area of other controllers appear the page wizard.html, however, should appear pages main.html, promissor.html, quadrinhos.html end terra.html, articles on these pages are functioning normally.

Shuhei Kagawa Over a year ago

Sorry, I don't understand what you mean.

|

Thiago Jem · Accepted Answer · 2015-03-04 03:46:56Z

0

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>

answered Mar 4, 2015 at 3:46

Thiago Jem

1671 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to dynamically insert items from a Array for the filter

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related