Question

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.'
}];

});

Answer 1

这个场景对我来说似乎很尴尬（我想如果你有这些链接的任何内容填充该文本框中的Id或名称），但你可以通过以下更改修复它：

1）使用'controller as'语法确保你在HTML中内联声明的变量都指向同一个东西：

ng-controller="peopleController as vm"

注意：“$ scope.people”然后需要更改为“this.people”

2）更新所有变量引用以包含vm前缀：

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

3）在文本框更改时，您可能希望清除所选项目：

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

一旦更新了所有这些引用，现在应该将所有内容绑定到相同的变量，并且过滤器应该可以工作。

您可以在此处查看：https://jsfiddle.net/t47bv0ta/4/

Angular - Dynamic Filter, Dynamic Content - Fundamentally Flawed?

1 个答案: