Question

我的数据是这样的：

{
    "owner" : {
        "id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
    },
    "name" : "SampleProj",
    "description" : "Sample proj desc",
    "id" : "9be14f93-7c03-4391-98ad-9491594e4798",
    "status" : "OPEN"
}
{
    "owner" : {
        "id" : "3f32ce2f-4300-439b-84bc-92ad46fbccf7"
    },
    "name" : "Analysis report",
    "description" : "Analysis report",
    "id" : "dac7c5c1-5046-4437-b092-",
    "status" : "OPEN"
}

我使用以下内容搜索数据并且工作正常，但如何仅在搜索结果上显示结果（基于关键字）？

<div class="form-group">
    <input class="form-control input_search_projects" type="text" ng-model="search" placeholder="Search Projects"/>
</div>

<div class="col-md-6">
    <div class="list_projects_section_in_dashboard">
        <ul style="list-style: none">
            <li ng-repeat="wd in currentPageWorkOrders | filter:search">
                <a href=""> 
                    <img src="./images/projectthumb.jpg" />
                    <h4>{{wd}}</h4>
                </a>
                <p>Publisher Name</p>
            </li>
        </ul> 
    </div>
</div>

Answer 1

您可以向ng-show标记添加ul指令，如下所示：

<ul style="list-style: none" ng-show="search">
    <li ng-repeat="wd in currentPageWorkOrders | filter:search">
        <a href=""> 
            <img src="./images/projectthumb.jpg" />
            <h4>{{wd}}</h4>
        </a>
        <p>Publisher Name</p>
    </li>
</ul>

ng-show指令确保在模型search具有非空字符串之前不会显示内容。

Answer 2

html标记内的搜索变量范围不同，使用$ ctrl或vm，以便搜索html标记的范围应保持不变。

使用此代码，肯定会有效： -

<div class="form-group">
    <input class="form-control input_search_projects" type="text" ng-model="$ctrl.search" placeholder="Search Projects"/>
</div>

<div class="col-md-6">
    <div class="list_projects_section_in_dashboard">
        <ul style="list-style: none">
            <li ng-repeat="wd in currentPageWorkOrders | filter:$ctrl.search">
                <a href=""> 
                    <img src="./images/projectthumb.jpg" />
                    <h4>{{wd}}</h4>
                </a>
                <p>Publisher Name</p>
            </li>
        </ul> 
    </div>
</div>

$ctrl或vm表示控制器名称。

Answer 3

如Sandeep所述，您可以使用ng-show。但我建议您使用ng-if，这不仅会隐藏结果，还会阻止呈现内容。

＆＃13;

var app = angular.module("sa", []);

app.controller("FooController", function($scope) {
  $scope.currentPageWorkOrders = ['foo', 'bar'];

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div ng-app="sa" ng-controller="FooController" class="row">
  <div class="col-sm-3">
    <input class="form-control input_search_projects" type="text" ng-model="search" placeholder="Search Projects" />
  </div>

  <div class="col-sm-6">
    <div class="list_projects_section_in_dashboard">
      <ul style="list-style: none" ng-if="search">
        <li ng-repeat="wd in currentPageWorkOrders | filter:search">
          <a href="">
            <img src="./images/projectthumb.jpg" />
            <h4>{{wd}}</h4>
          </a>
          <p>Publisher Name</p>
        </li>
      </ul>
    </div>
  </div>
</div>

＆＃13;

尝试相同的上述工作方案。尝试搜索foo或bar

仅在角度搜索时显示结果

3 个答案: