我有以下几点:
HTML:
<div ng-controller="repeatPeople">
<br>
<p>
<input type="text" id="search" ng-model="searchPeople"
placeholder="Search" >
</p><br><br>
<table border="0">
<thead style="background-color: lightgray;">
<tr>
<td style="width: 30px;"></td>
<td>Name</td>
<td>Gender</td>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="person in people | filter:searchPeople">
<td>
<button ng-if="person.expanded" ng-click="person.expanded = false">-</button>
<button ng-if="!person.expanded" ng-click="person.expanded = true">+</button>
</td>
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
</tr>
<tr ng-if="person.expanded" ng-repeat-end="">
<td colspan="3">{{person.details}}</td>
</tr>
</tbody>
</table>
</div>
JS:
function repeatPeople($scope) {
$scope.people = [
{name: "John", gender: "Male", details: "Hi ! I am John and age is 25. I do dance well."},
{name: "Mary", gender: "Female", details: "Hi ! I am Mary and age is 30. I read books."},
{name: "Dan", gender: "Male", details: "Hi ! I am Dan and age is 20. I like to play cricket."},
{name: "Alex", gender: "Male", details: "Hi ! I am Alex and age is 35. I like to watch movies."},
{name: "Rosy", gender: "Female", details: "Hi ! I am Rosy and age is 25. I play Guitar."}
];
}
我可以使用
search
或filter
的名称,单击它们的图标也可以从上面的代码中查看其详细信息,但是我遇到的一个问题是:如何在或searching
各自的名称即可查看其详细信息,而不是从输入字段中单击其图标。在这方面请帮助我,在此先谢谢!已创建Fiddle。
最佳答案
尝试这样
<tr ng-repeat-start="person in result = (people | filter:searchPeople)">
<td>{{person.name}}</td>
<td>{{person.gender}}</td>
</tr>
<tr ng-if="result.length > 0 && searchPeople" ng-repeat-end="">
<td colspan="3">{{person.details}}</td>
</tr>
Demo