3

我在为引导程序的 ui-typeahead 指令创建列表时遇到问题：

$http-call 返回以下 json：

[{"title":"FOO", "equipment":[{"model":"Model 1"}, {"model":"Model 2"}], "combine":"true"}]

我需要做的是：

  1. 将标题“FOO”连接到用户已经在输入字段中输入的输入，并且
  2. 创建设备列表：“模型 1”和“模型 2”（实际的下拉数据）作为 2 个单独的下拉项或连接“模型 1”和“模型 2”如果“组合”设置为“ true"，这只会产生一个下拉项目。

单击下拉列表中的“设备”条目之一后，我需要调用一个函数，该函数在服务对象中设置所选模型，然后调用 $location 的 url 函数。

这可能吗？

这是我通过“typeahead-template-url”使用的模板：

<input typeahead="val for val in autoComplete($viewValue)"
  typeahead-template-url="searchAutocompleteTpl.html"  
  ng-model="query"/>

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span>found in: </span>
  <div ng-repeat="eqp in match.model.equipment">
    <a href="" ng-click="showItem(eqp.model)">
      {{eqp.model}}
    </a>
  </div>
</script>
4

1 回答 1

0

您需要更新您的模板：

<script type="text/ng-template" id="searchAutocompleteTpl.html">
  <span>found in: {{match.model.title}}{{query}}</span>
  <div ng-show="match.model.combine=='true'" ng-repeat="eqp in match.model.equipment">
    <a href="" ng-click="showItem(eqp.model)">
      {{eqp.model}}
    </a>
  </div>
  <div ng-show="match.model.combine=='false'">
    <a href="" ng-click="showItem(eqp.model)" ng-repeat="eqp in match.model.equipment">
      {{eqp.model}}
    </a>
  </div>
</script>

对于您的问题 1 检查<span>found in: {{match.model.title}}{{query}}</span>。使用模型“查询”，您可以访问输入的值并将标题与其连接。

对于问题 2，我使用了不同的 div，并根据组合值仅显示适当的 div。

我还做了一个Fiddler，我希望它有帮助（它不是美，而是有效）。

唑利尔

于 2016-02-10T16:14:23.533 回答