Question

我做了一个说明问题的人：

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

基本上，我有一个名字和名字的名单。我想允许用户选择仅按名字或姓氏过滤或两者都过滤。我可以管理过滤器，但是，在UI上，如果没有为该字段选择过滤器，我希望避免突出显示。例如，如果未选择姓氏，则不应突出显示姓氏列。在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

这可以更优雅地完成，但希望这个想法得以传达。

如何使bootstrap typeahead模板在Angular中使用scope参数？

1 个答案: