angular ui-typeahead建议+如果没有结果,请保留

时间:2015-10-24 14:16:23

标签: javascript angularjs angular-ui-bootstrap typeahead.js

控制器

 $scope.log = function(value) {
        console.log(value);
    }
 $scope.customers = array....

查看

 <script type="text/ng-template" id="customPopupTemplate.html">
    <ul class="dropdown-menu" ng-show="isOpen() && !moveInProgress" ng-style="{top: position().top+'px', left: position().left+'px'}" style="display: block;" role="listbox" aria-hidden="{{!isOpen()}}">
        <li ng-repeat="match in matches track by $index" ng-class="{active: isActive($index) }" ng-mouseenter="selectActive($index)" ng-click="selectMatch($index)" role="option" id="{{::match.id}}">
            <div uib-typeahead-match index="$index" match="match" query="query" template-url="templateUrl"></div>
        </li>

        <button type="button" class="btn btn-success"  ng-click="$parent.$parent.log(query);">Post</button>
       input: {{query}}
    </ul>

</script>
     <div class="form-group">
                                <input placeholder="Vælg kunde" type="text" ng-model="customer"  typeahead-editable="false" uib-typeahead="customer as customer.customer for customer in customers | filter:$viewValue | limitTo:8" class="form-control"
                                       typeahead-popup-template-url="customPopupTemplate.html"  >
                            </div>

当我输入到预先输入,并且没有结果时,下拉框消失了,我怎么能让我留下来

还想知道如何制作打字自动建议,点击输入框时显示它会显示下拉列表等。列表中的前5位。

1 个答案:

答案 0 :(得分:0)

指令uib-typeahead-popup具有独立的范围。这意味着您不能在模板中使用任何范围变量,除非在该指令的隔离范围中明确定义。 使用这个特定的指令是不可能的,除非你应用一个非常脏的技巧,例如将属性添加到客户对象:

for (var i=0; i<customers.length; i++) {
    customers[i].whatadd = "something";
}

然后您可以在模板中使用以下内容:

<a href="">+ add {{matches[0].whatadd}}....</a>

如果您不喜欢脏技巧,那么您必须编写自己的先行指令,该指令没有独立的范围,或者允许您将添加指定为额外属性。