javascript - Angular - 动态过滤器、动态内容 - 存在根本性缺陷？

Question

我正在尝试创建一个链接表，我用它来控制我的内容。我还希望预览表格下方的内容，以便用户了解他们正在使用的内容。出于某种原因，我很难让过滤器在点击时工作。我可以很好地过滤文本框，但出于某种原因，我无法在 ng-click 上进行过滤。

真正奇怪的是，为我的表格生成的代码似乎完全有意义。它接受 ID 就好了。是否有可能为另一个动态内容创建一个动态过滤器列表，或者我的方法是否存在根本性缺陷？

预先感谢您的帮助。

这是它的一个 fiddle :

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

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

您可以在这里查看:https://jsfiddle.net/t47bv0ta/4/