0

我正在使用带有 Bootstrap UI typeahead 的 Angular JS，并从 REST 服务中提取数据。数组中的项目包括我组合的城镇列表（服务的城镇），过滤掉重复项并创建了一个预先输入字段使用的“城镇列表”数组。一切都很好。

我需要帮助的问题是在搜索城镇/城市名称时，有些人使用相同的词（即贝德福德、新贝德福德、布鲁克菲尔德、西布鲁克菲尔德、东布鲁克菲尔德）当用户键入“贝德福德”时，“新”的结果贝德福德也出现了。

我想匹配 EXACT 数组值，并且仅在匹配时显示结果。因此，如果用户搜索 Bedford，结果中不会包含“New Bedford”（除非项目同时包含两个字符串）

我想知道是否有一种简单的方法可以解决这个问题，或者我是否需要包含一个自定义过滤器。

在对此进行故障排除时，我生成了导致问题的所有两个名称城镇的第二个数组......我不介意一个解决方案，我只需运行带有条件的自定义过滤器来检查查询字符串是否匹配。

<input id="townsrch" type="text" class="form-control input-sm" ng-model="selected" uib-typeahead="town for town in towns | filter:$viewValue | limitTo:8" placeholder="search by town" typeahead-editable="false" ng-change="updateView()" typeahead-on-select="onSelect($item, $model, $label)">

<div ng-show="textsearch || selected" class="item team-item asp_an_fadeInDown ng-cloak" ng-repeat="x in names | filter:textsearch | filter:selected | orderBy:'title.rendered'">

<slick id="theresultingslides" slides-to-show="4" slides-to-scroll="1" data="names" ng-if="viewLoaded" settings="slickConfig">

<a class="asp_res_image_url" href="{{ x.link }}">
  <div class="asp_image" style="background-image: url('{{x._embedded['wp:featuredmedia'][0].media_details.sizes.full.source_url}}');">
  <div class="void"></div>
  </div>
</a>

<div class="asp_content">
   <h3><a class="asp_res_url" href="{{ x.link }}">{{x.title.rendered}}<span class="overlap"></span></a></h3>
   <div class="etc"></div>
   <p class="desc"></p><p class="emp-info"><strong>{{stripBr(x.acf.team_member_title)}}</strong><br/>
   {{x.acf.team_member_branch_location}}<br />
   <small>{{stripWww(x.acf.team_member_email)}}</small></p>
   <div class="town-list-info"><p><small>{{x.acf.team_member_town}}</small></p></div>
</div>
<div class="clear"></div>
</div>
</slick>

<script>

angular.module('teamApp', ['slickCarousel','ui.bootstrap'])
  .controller('namesCtrl', function($http, $scope, $timeout) {
      $http.get("/wp-json/wp/v2/team-member?_embed&per_page=100")
        .then(function (response) {
         ..... unrelated stuff here ......
4

1 回答 1

0

我找到了解决方法。我创建了一个自定义过滤器。在循环中，我为单个项目“城镇列表”设置了一个变量，然后将另一个变量转换为数组。然后我使用 indexOf 来匹配数组中的确切值：

angular.module('TownFilter', [])
  .filter('compareTowns', function(){
    return function(data,selected){
        var output = []; 
        if(!!selected){
            skill = selected;
            for(var i = 0;i<data.length; i++){
              var townsection = data[i].acf.team_member_town;
              var finaltown = townsection.split(',');
                if(finaltown.indexOf(skill) !== -1){
                output.push(data[i]);
                }
            }
        }  else {
            output = data;
        }
        return output; 
    }
})
于 2018-02-23T19:35:32.833 回答