Question

我正在使用AngularJS构建一个工作板应用程序来了解该框架。我得到了应用程序从JSON中提取数据并添加了一些过滤器。虽然过滤器工作正常，但它们并不总是显示搜索查询的正确结果。这是代码：

  <h1 class="text-center">Active Jobs</h1>
  <div class = "row">
  <div class="col-md-4 col-md-offset-6"><input type="text" class="form-control" ng-model = "search" placeholder="Search Jobs"></div>
  <div class = "col-md-6 col-md-offset-6">
    <label>Sort by:
            <select ng-model="jobSearch">
                <option value="location" selected>Location</option>
                <option value="salary">Salary</option>
                <option value="role">Role</option>                
            </select>
        </label>
    <label class="formgroup">
      <input type="radio" ng-model="order" name ="order" checked> ascending  
    </label>
    <label class="formgroup">   
      <input type="radio" ng-model="order" name ="order" value = "reverse"> descending
    </label>    
  </div>  
</div>
</div>
  <div class="row" ng-repeat="job in jobs | filter:search | orderBy: jobSearch:order">
    <div class="col-md-6">
      <h2><a href = "#/jobs/{{ jobs.indexOf(job) }}">{{ job.designation }}</a></h2>
      <p>{{ job.location }}</p>
      <p>{{ job.role }}</p>
      <p>{{ job.salary  | currency }}</p>
  </div>
</div>
</div>

我在奥斯汀，旧金山，赫特福德郡等地开设了工作岗位。当我开始打字时，比如“他”或“她”，除了赫特福德郡的名单外，其他很少的商品也出现了。经过仔细研究，我发现带有这些字母的单词出现在这些列表的描述中。当我使用角色（远程，全职，兼职）搜索时也会发生同样的情况。如何确保仅对下拉列表中选择的属性执行查询，而不是整个列表？

Answer 1

<div class="row" ng-repeat="job in jobs | filter:{jobSearch: search} | orderBy: jobSearch:order">

检查一下

Answer 2

搜索

<div class="row" ng-repeat="job in jobs | filter:search | orderBy: jobSearch:order">

绑定到输入中的字符串。在过滤器中使用String时，将返回包含搜索值的字符串属性的数组中的所有对象。

如果您只想搜索位置，请将输入的ng-model更改为：

<input type="text" class="form-control" ng-model = "search.location" placeholder="Search Jobs">

修改

在控制器中使用功能应该更容易

$scope.search(value) { return value[$scope.jobSearch] == $scope.searchTerm; }

在你的html中，你将输入搜索绑定到searchTerm：

<input type="text" class="form-control" ng-model = "searchTerm" placeholder="Search Jobs">

您对搜索功能的过滤器：

<div class="row" ng-repeat="job in jobs | filter:search() | orderBy: jobSearch:order">

希望有帮助

过滤后的结果不准确

2 个答案: