2

I am trying to create a table of links which I am using to control my content. I also wish to preview the content below the table so users know what they're working with. For some reason, I'm having a terrible time getting the filter to work on a click. I can filter on a textbox just fine, but for some reason, I'm failing at doing it on ng-click.

And what's really odd is that the code that comes out for my table seems to make complete sense. It takes in the ID just fine. Is it even possible to make a dynamic list of filters for another dynamic piece of content or is my methodology fundamentally flawed?

Thanks, in advance, for your help.

Here's a fiddle of it:

https://jsfiddle.net/Loopy/t47bv0ta/

<div class="people-wrapper" ng-app="peopleApp" ng-controller="peopleController">
 <h3>Links List (doesn't work):</h3>

<ul>
    <li data-ng-repeat="thisPersonListing in people"><a ng-click="showPerson={{thisPersonListing.id}}" href="#">{{thisPersonListing.fname}} {{thisPersonListing.lname}}</a>

    </li>
</ul>
 <h3>Textbox (does work):</h3>

<input type="text" ng-model="showpersonTEXTBOX">
 <h3>Display Person</h3>

<div data-ng-repeat="thisPerson in people | filter:showpersonTEXTBOX | filter:showPerson" class="person-{{thisPerson.id}}">
     <h4>{{thisPerson.fname}} {{thisPerson.lname}}</h4>

    <p><strong>ID:</strong> {{thisPerson.id}}</p>
    <p><strong>Abstract:</strong> {{thisPerson.abstract}}</p>
</div>


angular.module('peopleApp', []).controller('peopleController', function ($scope) {
$scope.people = [{
    id: '5124dqd',
    fname: 'Stannis',
    lname: 'Baratheon',
    abstract: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia nibh vitae arcu pharetra, in blandit odio lobortis. Phasellus scelerisque, metus id porttitor blandit, ligula erat tincidunt nibh, a ultricies odio felis vitae purus. Fusce ac sapien fringilla, ornare est eu, bibendum felis. Proin feugiat nisl vitae quam fringilla luctus. Curabitur ornare diam nec nunc commodo varius. Aliquam massa ante, tempus eget aliquet quis, condimentum consectetur eros. Maecenas scelerisque turpis quis cursus lobortis. Nunc pharetra condimentum massa, at rhoncus leo facilisis quis. Sed nisl mi, auctor quis mauris id, porta pellentesque nisi.'
}, {
    id: 'qqqqw231g',
    fname: 'Rickon',
    lname: 'Stark',
    abstract: 'Nam diam tortor, egestas nec porta id, tincidunt non risus. Nam at maximus eros. Sed bibendum ante eget viverra ornare. In hac habitasse platea dictumst. Nam at vehicula massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie ex nec felis pharetra, non pharetra velit tristique. Sed arcu libero, condimentum at nisi vitae, lobortis volutpat nisi.'
}, {
    id: 'gb3gg5sxv',
    fname: 'Daenerys',
    lname: 'Targarian',
    abstract: 'Maecenas ut malesuada lectus. Sed vehicula lectus id eleifend scelerisque. Nam lacinia nisi a orci dictum dictum. Sed molestie porttitor dignissim. Fusce finibus sapien vel iaculis iaculis. Nullam suscipit leo sit amet leo tristique, quis euismod arcu venenatis. Vivamus sed mauris felis. Integer condimentum vel sem eu sagittis. Nulla in tristique ex. Ut nisi nunc, hendrerit id hendrerit bibendum, accumsan in enim. Duis vitae finibus sapien.'
}, {
    id: 'bber343',
    fname: 'Tyrion',
    lname: 'Lannister',
    abstract: 'Maecenas scelerisque turpis quis cursus lobortis. Nunc pharetra condimentum massa, at rhoncus leo facilisis quis. Sed nisl mi, auctor quis mauris id, porta pellentesque nisi.'
}, {
    id: 'hber454',
    fname: 'Robert',
    lname: 'Arryn',
    abstract: 'Aenean ipsum risus, molestie pellentesque facilisis a, egestas a ipsum. Etiam bibendum elit quis ornare hendrerit. Nulla imperdiet mi ut mi dictum, non rhoncus nibh consequat. Vestibulum nec fermentum ipsum, posuere dignissim est. Suspendisse tincidunt, sapien id laoreet luctus, augue enim elementum ante, ut gravida ante velit vel mi. Phasellus at lectus id urna pharetra pretium eget eu sapien. Nam eros nibh, placerat accumsan condimentum in, semper et dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris lectus turpis, rutrum id lacus pharetra, dapibus pellentesque sapien. Fusce viverra hendrerit tellus ac elementum. Proin viverra nisi condimentum arcu ultricies, sed ultrices lorem maximus. Nunc imperdiet id nisi porttitor aliquam. In vitae rhoncus mi. Curabitur tempor, sem quis dignissim maximus, nisl libero lacinia neque, a pulvinar risus tellus ac quam. Vestibulum vel fringilla velit. Nunc mattis iaculis orci, non tincidunt odio lacinia ac.'
}, {
    id: 'bb35j6ju',
    fname: 'Balon',
    lname: 'Greyjoy',
    abstract: 'In convallis felis ac neque maximus, a tempus elit eleifend. Pellentesque pellentesque purus placerat consectetur euismod. Quisque efficitur et risus ac malesuada. Maecenas tempor lectus ac velit mattis iaculis. Vivamus velit tellus, interdum nec maximus et, mollis et eros. Maecenas sed malesuada metus. Fusce posuere, diam vel dignissim volutpat, neque elit interdum velit, sed rutrum ex sem in erat. Duis vitae nunc ornare, condimentum ex vitae, commodo quam. Nam sit amet laoreet dolor. Maecenas sodales arcu eu lobortis malesuada. Cras sed mollis turpis. Nunc eros leo, porttitor malesuada arcu in, tincidunt dignissim nulla. Morbi at ultricies mauris. Integer ultricies sapien quis libero suscipit feugiat. Sed odio felis, tincidunt et ultrices sollicitudin, pulvinar sagittis sem. Suspendisse eget risus nec nunc viverra volutpat eu consectetur lorem.'
}, {
    id: 'bnfvnbrt443',
    fname: 'Doran',
    lname: 'Martell',
    abstract: 'Vestibulum nec fermentum ipsum, posuere dignissim est. Suspendisse tincidunt, sapien id laoreet luctus, augue enim elementum ante, ut gravida ante velit vel mi. Phasellus at lectus id urna pharetra pretium eget eu sapien. Nam eros nibh, placerat accumsan condimentum in, semper et dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris lectus turpis, rutrum id lacus pharetra, dapibus pellentesque sapien. Fusce viverra hendrerit tellus ac elementum. Proin viverra nisi condimentum arcu ultricies, sed ultrices lorem maximus. Nunc imperdiet id nisi porttitor aliquam. In vitae rhoncus mi.'
}, {
    id: 'sdfb343g',
    fname: 'Edmure',
    lname: 'Tully',
    abstract: 'Phasellus scelerisque, metus id porttitor blandit, ligula erat tincidunt nibh, a ultricies odio felis vitae purus. Fusce ac sapien fringilla, ornare est eu, bibendum felis. Proin feugiat nisl vitae quam fringilla luctus. Curabitur ornare diam nec nunc commodo varius. Aliquam massa ante, tempus eget aliquet quis, condimentum consectetur eros. Maecenas scelerisque turpis quis cursus lobortis.'
}, {
    id: 'rtjhnn54h54y',
    fname: 'Margaery',
    lname: 'Tyrell',
    abstract: 'Cras sed mollis turpis. Nunc eros leo, porttitor malesuada arcu in, tincidunt dignissim nulla. Morbi at ultricies mauris. Integer ultricies sapien quis libero suscipit feugiat. Sed odio felis, tincidunt et ultrices sollicitudin, pulvinar sagittis sem. Suspendisse eget risus nec nunc viverra volutpat eu consectetur lorem.'
}];

});

Loopy
  • 63
  • 8
  • Do those need to be strings? `ng-click="filterById = '000001'"` – rgthree May 04 '15 at 19:47
  • I added the single quotes as you suggested. Still no dice. Thanks for the reply, though. – Loopy May 05 '15 at 18:31
  • It's hard to debug by just looking at arbitrary markup. Can you recreate your issue in a jsfiddle with mock data perhaps? You may even find it actually leads you to your answer naturally. – rgthree May 05 '15 at 18:56
  • Good point, rgthree. I have created a fiddle for the problem in the original post. – Loopy May 07 '15 at 19:02

1 Answers1

1

The scenario seems very awkward to me (I think if anything you'd have those links populate the Id or name in that textbox), but you can fix it with the following changes:

1) Use 'controller as' syntax to ensure the variables you're declaring inline in the HTML all refer to the same thing:

ng-controller="peopleController as vm"

note: "$scope.people" then needs to change to "this.people"

2) Update all variable references to include that vm prefix:

 <li data-ng-repeat="thisPersonListing in vm.people"><a ng-click="vm.showPerson = thisPersonListing.id">

3) On textbox change you probably want the selected item cleared out:

<input type="text" ng-model="vm.showpersonTEXTBOX" ng-change="vm.showPerson = null">

Once all of those references have been updated, everything should now be bound to the same variables, and the filters should work.

You can view it here: https://jsfiddle.net/t47bv0ta/4/

John
  • 17,163
  • 16
  • 65
  • 83
  • Awesome, John. Thank you so much. The textbox was just there to show that it works using that; it isn't part of the actual solution. Can I ask you a favor? Do you have a link to a documentation reference where I can read why this is necessary? I just would like to learn when/where I should use this method. Thanks! – Loopy May 08 '15 at 12:09
  • But that's really cool. Without manifesting it as an object, I guess the controller just acts like a function, so it can only be used in limited scopes? I'm guessing I'll need to use it whenever I want to use the same controller for multiple repeaters? Any other case where this would be necessary? Thanks again! – Loopy May 08 '15 at 12:21
  • 1
    Searching for 'angular dot notation' will help I think. Here's one of the answers: http://stackoverflow.com/questions/18128323/angularjs-if-you-are-not-using-a-dot-in-your-models-you-are-doing-it-wrong – John May 08 '15 at 13:20