Question

我在为bootstrap的ui-typeahead指令创建列表时遇到问题：

$ http-call返回以下json：

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

我需要做的是：

将标题“FOO”连接到用户已在输入字段中输入的输入和
创建设备列表：“Model 1”和“Model 2”（实际下拉数据）作为2个单独的下拉项目OR 如果“combine”设置为“true”，则仅连接“模型1”和“模型2” 一个下拉项目。

单击下拉列表中的某个“设备”条目时，我需要调用一个函数，该函数在服务对象中设置所选模型，然后调用$ 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>

Answer 1

您需要更新模板：

<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>。使用模型＆＃39;查询＆＃39;您可以访问输入的值并使用它连接标题。

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

我也做了一个Fiddler，我希望它有所帮助（它不是一种美，但有效）。

ZoliR

创建自定义angular-bootstrap预先输入数据

1 个答案: