Question

我正在使用uiTypehead进行输入选择。

除了一个简单的事实外，它运作良好。我的输入总是具有类似

的形式

{name: "Las Vegas McCarran International (LAS)<span
class="country">United States</span>", iata: "LAS"}

所以我从后端插入<span class="country">...</span>到字符串中。

当我输入＆＃34; veg＆＃34;在输入字段中，这一切都很好。 enter image description here

然而，当输入＆＃34; las＆＃34;相反，发生以下情况：

enter image description here

基本上发生的是，我的系统假定＆＃34; class＆＃34;要成为我想要的字符串的一部分，请在视图中执行以下操作：

<span c<strong="">lass="country"&gt;United States</span>

基本上，它承认＆＃34; las＆＃34;作为字符串并将强大的内容放入该部分，以使其无法正确显示。

我的观点，服务和我的控制器如下所示：

服务：

angular.module('tripdeltaApp').service('airportService',['$http',function($http){
    this.airport = function (entry) {
      return $http({
        method: 'POST',
        url: '/airport',
        data: {'search': entry}
      }).then(function (response) {
        return response.data.map(function (item) {
          //console.log(item);
          return item;
        });


      });
    };
}]);

控制器：

 $scope.onSelect = function ($item, $model, $label,to,index) {
    $model = urlParser.cleanAirport($model);
    if(to && $scope.flightArray[index+1] && !$scope.flightArray[index+1].from) {
      $scope.flightArray[index+1].from = $model;
    }
  };

并查看：

 <input type="text"
                               ng-focus="inputFocus=false"
                               ng-blur="inputFocus=true"
                               ng-model="flight.to"
                               placeholder="{{'TO'|translate}}"
                               name="arrivalAirport"
                               typeahead="data as data.name for data in getAirport($viewValue)"
                               class="form-control"
                               typeahead-editable="false"
                               typeahead-on-select="onSelect($item, $model, $label,1,$index)"
                               autocomplete="off"
                               select-on-click
                               required>

知道如何解决这个问题吗？

Answer 1

我认为您最好的选择是使用自定义模板，如Typeahead example中所述，并使用标记，而不是将标记放入数据中。

您将数据更改为：

{name: "Las Vegas McCarran International (LAS)", country: "United States", iata: "LAS"}

并使用类似这样的模板：

<script type="text/ng-template" id="customTemplate.html">
   <div>
      {{match.model.name}}
      <span class="country">{{match.model.country}}</span>
   </div>
</script>

<强>更新如果您无法更改后端的数据，则可以在数据加载到JavaScript时对其进行预处理：

var re = new RegExp('^([^<]+)<span class="country">([^<]+)<\/span>');

angular.module('tripdeltaApp').service('airportService',['$http',function($http){
    this.airport = function (entry) {
      return $http({
        method: 'POST',
        url: '/airport',
        data: {'search': entry}
      }).then(function (response) {
        return response.data.map(function (item) {
          //console.log(item);
          var matches = item.name.match(re);
          item.name = matches[1];
          item.country = matches[2];
          return item;
        });
      });
    };
}]);

正则表达式可能需要根据您拥有的特定数据进行一些调整。如果任何机场“名称”字段有“＆lt;”，那显然会造成麻烦。您可能还需要弄乱间距，引号的位置等。

Typehead在某些输入上显示错误

1 个答案: