Gid*_*don 60 autocomplete directive angularjs angular-http
我正在尝试编写一个自动完成指令,该指令使用$ http请求从服务器获取数据(不使用任何外部插件或脚本).目前它仅适用于静态数据.现在,我知道我需要将$ http请求插入到source:指令中,但是我找不到关于这个主题的任何好的文档.
$http.post($scope.url, { "command": "list category() names"}).
success(function(data, status) {
$scope.status = status;
$scope.names = data;
})
.
error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
app.directive('autoComplete', function($timeout) {
return function(scope, iElement, iAttrs) {
iElement.autocomplete({
source: scope[iAttrs.uiItems],
select: function() {
$timeout(function() {
iElement.trigger('input');
}, 0);
}
});
};
});
<input auto-complete ui-items="names" ng-init="manualcat='no category entered'" ng-model="manualcat">
那么,我如何正确地将这一切拼凑成Angular方式呢？
Jus*_*cha 44
我制作了一个autocomplete指令并将其上传到GitHub.它还应该能够处理HTTP-Request中的数据.
这是演示:http://justgoscha.github.io/allmighty-autocomplete/ 这里的文档和存储库:https://github.com/JustGoscha/allmighty-autocomplete
因此,基本上,promise当您想要从HTTP请求获取数据时,您必须返回一个,这在加载数据时会得到解决.因此,您必须$q在发出HTTP请求的位置注入service/directive/controller.
例:
function getMyHttpData(){
var deferred = $q.defer();
$http.jsonp(request).success(function(data){
// the promise gets resolved with the data from HTTP
deferred.resolve(data);
});
// return the promise
return deferred.promise;
}
我希望这有帮助.
mad*_*ead 16
您需要ng-change在范围内编写具有功能的控制器.在ng-change回调中,您可以调用服务器并更新完成.这是一个存根(没有$http这是一个插件):
HTML
<!doctype html>
<html ng-app="plunker">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.4.0.js"></script>
<script src="example.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class='container-fluid' ng-controller="TypeaheadCtrl">
<pre>Model: {{selected| json}}</pre>
<pre>{{states}}</pre>
<input type="text" ng-change="onedit()" ng-model="selected" typeahead="state for state in states | filter:$viewValue">
</div>
</body>
</html>
JS
angular.module('plunker', ['ui.bootstrap']);
function TypeaheadCtrl($scope) {
$scope.selected = undefined;
$scope.states = [];
$scope.onedit = function(){
$scope.states = [];
for(var i = 0; i < Math.floor((Math.random()*10)+1); i++){
var value = "";
for(var j = 0; j < i; j++){
value += j;
}
$scope.states.push(value);
}
}
}
在没有外部模块或指令的情况下，在angular或angularjs中执行此操作的最简单方法是使用列表和数据列表HTML5。您只得到一个json并使用ng-repeat来提供数据列表中的选项。您可以从ajax获取json。
在此示例中：
然后您可以在ng-reapet中添加过滤器和orderby
!! 列表和数据列表ID必须具有相同的名称！
<input type="text" list="autocompleList" ng-model="ctrl.query" placeholder={{ctrl.msg}}>
<datalist id="autocompleList">
<option ng-repeat="Ids in ctrl.dataList value={{Ids}} >
</datalist>
UPDATE：是本机HTML5，但对浏览器和版本类型怀有戒心。检查一下：https : //caniuse.com/#search=datalist。
| 归档时间： |
|
| 查看次数： |
150815 次 |
| 最近记录： |