时间戳

首页 > 解决方案 > 角链式预输入中断与空格

angularjs - 角链式预输入中断与空格

问题描述

给定两个带有预输入的条目，一个链接到另一个（第一个中的选择决定了第二个的选择列表），包含空格的值似乎存在问题，即使这些条目是通过 id 链接的，而不是显示值。

该行为最好在演示中显示：JSFiddle

重现：

  1. 在第一个预先输入中选择一个对象
  2. 在第二个预先输入中选择一个对象，看看它是否有效
  3. 选择第一个预先输入中名为损坏的对象
  4. 尝试在第二个 typeahead 中选择一个对象，没有可用的选择列表

在第id一个条目中选择的对象的 确定第二个的选择列表。但是，如果所选对象的末尾有空格name，则第二个预输入会中断。

如果您要删除 末尾的空格Broken ，则第二个条目将按预期开始工作。

这对我来说似乎是一个错误，因为第一个条目的显示值不应该在第二个条目中发挥作用。

我错了吗？

标签： angularjsangular-ui-bootstraptypeahead

解决方案

在第一个输入中添加 ng-trim="false"。它解决了这个问题。它发生在 Angular 删除模糊的末端空间时。

    <input type="text"
           id="estate"
           cam-variable-type="String"
           ng-model="line.estate"
           uib-typeahead="estate as (estate.id + ' - ' + estate.name) for estate in estates | filter:$viewValue | limitTo:10"
           typeahead-min-length="1"
           typeahead-no-results="noResults"
           typeahead-select-on-blur="true"
           autocomplete="off"
           ng-trim="false"
           class="form-control form-input">

推荐阅读