Question

我正在开发一个AngularJS应用程序。我的应用程序有一个可以看到here的plunker。这个应用程序有我为另一个项目所做的服务。该服务看起来像这样：

myApp.service('myService', ['$http', '$timeout', '$q', function($http, $timeout, $q) {
  this.getResults = function() {
    var deferred = $q.defer();

    var results = [];
    results.push({ name: 'Alpha', id:1, description:'The first' });
    results.push({ name: 'Bravo', id:2, description:'The second' });
    results.push({ name: 'Charlie', id:3, description:'The third' });

    deferred.resolve(results);

    return deferred.promise;
};

我正在尝试在UI Bootstrap framework中使用Typeahead控件。我成功地完成了基础设施。但是，我无法弄清楚如何使自定义结果模板工作。我不明白他们从哪里提取房产价值。我只是想创建一个显示名称和描述字段的模板。选择项目后，我想在文本框中显示名称。我的掠夺者是here。

Answer 1

请参阅此处http://plnkr.co/edit/VJFx436Tsew9unXWNQsJ?p=preview

1.在这里设置模板名称typeahead-template-url="result.html" 因此，模板脚本的ID必须为"result.html"

要从模板中的匹配模型访问数据，您需要使用match.model前缀。

<script type="text/ng-template" id="result.html">
<a>
  <div><h6>{{match.model.name}}<h6>< /div>
  <div><p>{{match.model.description}}</p></div>
</a>
</script>

在UI Bootstrap中使用带有Typeahead的模板

1 个答案: