如何使用范围参数角度引导预输入模板？ [英] How to make bootstrap typeahead template to use scope parameter in Angular?

问题描述

我做了一个plunker来说明这个问题：

I made a plunker to illustrate the issue:

"http://plnkr.co/edit/jqyCFv5R5pFMcYZe7kkP?p=preview"

基本上，我有姓和名的名单。我想允许用户通过名字或仅姓氏或两者都选择过滤器。我可以管理过滤器工作，但是，在UI，我想避免的亮点，如果不是在字段中选择过滤器。例如，如果没有被选择的姓，它不应该突出的姓氏列。在plunker，我试图用NG-显示隐藏无关，但它不工作。它看起来我不能从模板访问范围参数。那么，如何解决这一问题？

Basically, I have a list of names with first and last name. I want to allow user to choose filter by first name or last name only or both of them. I could manage the filter to work, however, on UI, I'd like to avoid highlight if filter is not selected for the field. For example, if last name is not selected, it should not highlight the last name column. In plunker, I tried to use ng-show to hide unrelated, but it doesn't work. It looks I can't access scope parameter from the template. So, how to fix the problem?

推荐答案

一个简单的解决办法是将你的源拉出成一个函数调用并注入额外的变量到结果：

A simple solution would be to pull out your source into a function call and inject the extra variables into the result:

<input type="text" ng-model="selected" typeahead="item as item.label for item in filterTitles($viewValue, filterFirst, filterLast)" typeahead-template-url="itemTpl.html" />

和在控制器：

$scope.filterTitles = function(filterText, shouldFilterFirst, shouldFilterLast){
    var result = [];
    for(var i=0;i<$scope.titles.length;i++){
      var title = $scope.titles[i];
      if((shouldFilterFirst && title.first.toLowerCase().indexOf(filterText.toLowerCase()) >= 0) || (shouldFilterLast && title.last.toLowerCase().indexOf(filterText.toLowerCase()) >= 0))
        result.push({
          first: title.first, 
          last: title.last, 
          shouldFilterFirst: shouldFilterFirst, 
          shouldFilterLast: shouldFilterLast
        });
    }

    return result;
}

简单plunker例如

这可能会更加优雅的完成，但希望这个想法传达。

This could be done much more elegantly, but hopefully the idea is conveyed.

这篇关于如何使用范围参数角度引导预输入模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！