angularjs - 创建自定义 Angular-Bootstrap 预输入数据

Question

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

$http-call 返回以下 json:

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

我需要做的是:

1. 将标题“FOO”连接到用户已在输入字段中输入的内容和
2. 创 build 备列表:“型号 1”和“型号 2”(实际下拉数据)作为 2 个单独的下拉项目或如果“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> 。使用模型“查询”，您可以访问输入的值并将标题与其连接起来。

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

我还做了一个Fiddler ，我希望它能有所帮助(它不是美丽的，而是有效的)。

ZoliR