Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/angularjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 如何在angular typeahead搜索中使用ng change_Javascript_Angularjs - Fatal编程技术网

Javascript 如何在angular typeahead搜索中使用ng change

Javascript 如何在angular typeahead搜索中使用ng change,javascript,angularjs,Javascript,Angularjs,我想在按键事件中搜索用户列表。我正在使用customTemplate.js显示列表,但在第一次按键时,结果列表并没有显示出来 这是我的密码: <input type="text" placeholder="Search people here..." ng-change="getMatchedUser();" ng-model="selected" data-typeahead="user as user.name for user in searchMembers | filter:$

我想在按键事件中搜索用户列表。我正在使用
customTemplate.js
显示列表,但在第一次按键时,结果列表并没有显示出来

这是我的密码:

<input type="text" placeholder="Search people here..." ng-change="getMatchedUser();"  ng-model="selected" data-typeahead="user as user.name for user in searchMembers | filter:$viewValue" typeahead-on-select="onSelect($item, $model, $label)" typeahead-template-url="customTemplate.html"  /> 

<script type="text/ng-template" id="customTemplate.html">
                <a style="cursor: pointer;">
                    <div class="search-div">
                        <span style="float: left;"><img ng-src="<?php echo base_url().UPLOAD_PROFILE ?>{{match.model.imageUrl}}" width="30" class="img-circle"></span>
                        <div class="search-name">
                            <span>{{match.model.name}}</span><br/>
                            <span ng-if="match.model.skillName.length">
                                <i class="skill">{{match.model.skillName}}</i>
                            </span>
                        </div>
                    </div>
                    <div style="padding-bottom:42px;" ng-if="match.model.length == 5">
                        <a href="<?php echo base_url(); ?>#/searchResult" style="float: left; padding: 18px 1px 5px 8px; color: black;"> 
                            Show More Results
                        </a>    
                    </div>
                </a>
</script> 

$scope.getMatchedUser = function(){
        $scope.searchValue = $scope.selected;
        $http({
            method : "POST",
            url : BASE_URL + 'getMatchedUser',
            data : $.param({"typeValue": $scope.selected}),
            headers : { 'Content-Type' : 'application/x-www-form-urlencoded'}
        }).success(function(data){ 
            if(data.status == "success"){
                $scope.searchMembers = data.searchMembers;
            }
        });
    };

$scope.getMatchedUser=函数(){
$scope.searchValue=$scope.selected;
$http({
方法:“张贴”,
url:BASE_url+'getMatchedUser',
数据:$.param({“typeValue”:$scope.selected}),
标题:{'Content Type':'application/x-www-form-urlencoded'}
}).success(函数(数据){
如果(data.status==“成功”){
$scope.searchMembers=data.searchMembers;
}
});
};

ng更改
实际上是在更新
ng型号
之前触发的

我找到的一个解决方案是简单地将
typeahead wait ms
属性(时间范围可以忽略不计)添加到typeahead
input
元素中

<input type="text" 
       placeholder="Search people here..." 
       ng-change="getMatchedUser();"  
       ng-model="selected" 
       data-typeahead="user as user.name for user in searchMembers | filter:$viewValue" 
       typeahead-wait-ms=10
       typeahead-on-select="onSelect($item, $model, $label)" 
       typeahead-template-url="customTemplate.html"  />


这10毫秒的暂停应该足以让
ng模型在触发
ng change
事件之前更新。

是否
typeahead on select=“onSelect($item,$model,$label)”
基本上为我们提供了模型实际更改时的挂钩?