過濾結果不準確

我正在使用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>

我已經創造就業機會像奧斯汀，舊金山，赫特福德郡等地點。當我開始打字，說，「他」或「她」，除了赫特福德郡上市，其他幾個列表也顯示出來。仔細檢查後，我發現帶有這些字母的單詞出現在這些列表的說明中。當我使用角色（遠程，全職，兼職）搜索時也會發生同樣的情況。我如何確保僅在下拉列表中選擇的屬性上執行查詢，而不是整個列表中的屬性？

來源

2014-09-24 user3224820

在

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

搜索綁定到你輸入的字符串。在過濾器中使用字符串時，將返回數組中包含搜索值的字符串屬性的所有對象。

如果你只想搜索的地點，您輸入的NG-模式更改爲：

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

希望能夠幫助

來源

2014-09-24 09:47:35

我正在使用一個下拉菜單，我想要使用菜單（薪水，角色）中的其他選項。在這種情況下，有沒有辦法適應這種解決方案？ – user3224820 2014-09-24 10:57:45

你可以試試ng-model =「search [jobSearch]」而不是ng-model =「search.location」。儘管您必須在jobSearch更改時清空搜索對象。 – 2014-09-24 12:40:13

我編輯我的答案，使用一個適合您的用例的函數。 – 2014-09-24 13:07:29

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

檢查這一項

來源

2014-09-24 09:46:09

這打破了搜索。沒有出現結果。 – user3224820 2014-09-24 10:55:02

此返回沒有值，因爲這返回作業，其中'工作['jobSearch'] ==搜索'，而不是'工作[jobSearch] ==搜索'。 – 2014-09-24 13:05:50

過濾結果不準確

回答

相關問題