如何使引導程序typeahead模板在Angular中使用scope參數？

Question

我做了一個plunker來說明這個問題：

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

基本上，我有一個姓和名的名單。我想讓用戶只選擇名字或姓氏或兩者都選擇過濾器。我可以管理過濾器的工作，但是，在用戶界面，我想避免突出顯示，如果沒有選擇過濾器的領域。例如，如果未選擇姓氏，則不應突出顯示姓氏列。在plunker中，我試圖用ng-show隱藏不相關的，但它不起作用。它看起來不能從模板訪問範圍參數。那麼，如何解決這個問題呢？

Answer 1

一個簡單的解決辦法是你的源拉出成一個函數調用並注入額外變量到結果：

<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; 
} 

Simple plunker example

這可以做得更優雅，但希望傳達這個想法。