我有以下几点:

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


我可以使用searchfilter的名称,单击它们的图标也可以从上面的代码中查看其详细信息,但是我遇到的一个问题是:如何在或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

07-24 09:47
查看更多