Angulaire du Matériel de saisie semi-automatique avec $http appel

Ce que je suis en train de faire Angulaire du Matériel de saisie semi-automatique (md-saisie semi-automatique) avec dynamique de données récupérées à partir d'un appel AJAX de mon API REST. Malheureusement, je ne reçois que barre de progression indéterminée au lieu de la saisie semi-automatique d'éléments que vous pouvez voir ci-dessous.

Résultat

Contrôleur

$scope.customersSelect = {};
$scope.selectedItem = null;
$scope.searchText = null;

$scope.getCustomers = function (query) {
    selectsService.getCustomers(query).then(function (results) {
        $scope.customersSelect = results.data;
        console.log($scope.customersSelect);
    }, function(error) {
        alert(error.data.message);
    });
}

Service.

var selectsServiceFactory = {};

_getCustomers = function (query) {
    return $http.get(serviceBase + 'api/selects/customers/' + query)
    .then(function(results) {
        return results;
    });
}

selectsServiceFactory.getCustomers = _getCustomers;

return selectsServiceFactory;

Vue

<md-autocomplete md-floating-label="Klient" 
            autocomplete="off" 
            flex="" 
            md-search-text-change="getCustomers(searchText)" 
            md-item-text="item" 
            md-items="item in customersSelect" 
            md-search-text="searchText" 
            md-selected-item="machine.customerId" 
            md-input-maxlength="100" 
            md-input-minlength="2" 
            md-input-name="machineOwner">
<md-item-template>
    <span md-highlight-text="searchText">{{item}}</span>
</md-item-template>

Je suis l'obtention de données de l'API, parce que je peux le voir imprimé sur la console.

Pourquoi ne pas vous retourner une promesse de service?

InformationsquelleAutor Paweł Hajduk | 2015-11-22

JS:

(function() {
  'use strict';
  angular
    .module('MyApp')
    .controller('DemoCtrl', DemoCtrl);

  function DemoCtrl($http) {
    var self = this;
    
    self.data = null;
    self.selectedItem = null;
    self.searchText = null;
    
    self.querySearch = function (query) {
      $http.get('http://www.omdbapi.com/?s=' + escape(query))
        .then(function(result) {
          self.data = result.data.Search;
          return result.data.Search;
        });
    }
  }
})();

HTML:

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>$http md-Autocomplete</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel='stylesheet prefetch' href='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.css'>
</head>
<body>
<div class="autocompletedemoFloatingLabel" ng-controller="DemoCtrl as ctrl" ng-app="MyApp" layout="column" ng-cloak="">
<md-content class="md-padding">
<form name="searchForm" ng-submit="$event.preventDefault()">
<div layout-gt-sm="row">
<md-input-container flex="">
<label>Name</label>
<input type="text">
</md-input-container>
<md-autocomplete md-floating-label="Favorite movie" 
flex="" 
md-item-text="item.Title"
md-items="item in ctrl.data" 
md-search-text-change="ctrl.querySearch(ctrl.searchText)"
md-search-text="ctrl.searchText" 
md-selected-item="ctrl.selectedItem" 
md-no-cache="ctrl.noCache" 
md-input-maxlength="30" 
md-input-minlength="2" 
md-input-name="autocompleteField" 
required="">
<md-item-template>
<span md-highlight-text="ctrl.searchText">{{item.Title}}</span>
</md-item-template>
<div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
<div ng-message="required">You <b>must</b> have a favorite movie.</div>
<div ng-message="minlength">Your entry is not long enough.</div>
<div ng-message="maxlength">Your entry is too long.</div>
</div>
</md-autocomplete>
</div>
</form>
</md-content>
</div>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-animate.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-route.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-aria.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-messages.min.js'></script>
<script src='https://cdn.gitcdn.xyz/cdn/angular/bower-material/v1.0.0-rc4/angular-material.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js'></script>    
</body>
</html>

Enfin je l'ai fait. Voici la solution.

Cette solution est la barre de progression? @PawelH893

InformationsquelleAutor Paweł Hajduk

0

J'ai eu du mal avec cela. J'ai fini par faire quelque chose comme ceci:
```
$scope.querySearch=function(searchTerm) {
return $http({
url:"http://mysearch.api?keyword="+searchTerm,
method:"GET"
})
.then(function(res) {
return res.data;
}
}
```
Problème pour moi est que le md-saisie semi-automatique besoin de la raison d'être d'un tableau, d'où la réponse de $http est un objet. J'espère que cela aide quelqu'un d'autre!!

InformationsquelleAutor Rolf Chen

Vous pouvez utiliser Angularjs, promet d'obtenir des données à partir de $http appel.

        <body>
<form name="searchForm" ng-submit="searchForm.$valid && submit()" novalidate>
<md-autocomplete flex-gt-sm="35"
required md-input-name="autocompleteField" 
md-input-maxlength="80" 
md-selected-item="selectedItem"
md-search-text="formdata.searchText" 
md-items="item in querySearch(formdata.searchText)" 
md-item-text="item.display" 
md-min-length="0"
md-floating-label="Get Values">
<md-item-template>
<span md-highlight-text="formdata.searchText" md-highlight-flags="^i">{{item.display}}</span>
</md-item-template>
<md-not-found>
No data matching "{{formdata.searchText}}" were found.
</md-not-found>
<div ng-messages="searchForm.autocompleteField.$error" ng-if="searchForm.autocompleteField.$touched">
<div ng-message="required">Please <b>select</b> Pricing model id.</div>
</div>
</md-autocomplete>
</form>
</body>
<script>
var getdataList= getData().then(function(greeting) {
$scope.getdataList = greeting;
})
$scope.querySearch = querySearch;
function querySearch(query) {
var results = query ? $scope.getdataList.filter(createFilterFor(query)): $scope.getdataList, deferred;
return results;
}
function getData() {
deferred = $q.defer();
$http.get(url).then(function(response) {
var responseList = response.map(function (task) {
return {value: task.dataname, display:task.dataname};  
});
deferred.resolve(responseList);
},function myError() {
console.log("Error")
});
return deferred.promise;
}
function createFilterFor(query) {
var lowercaseQuery = query.toLowerCase();
return function filterFn(state) {
var lowercaseState = state.value.toLowerCase();
return (lowercaseState.search(lowercaseQuery) >= 0);
};
}
</script>

InformationsquelleAutor ashish siddhu

-1

Utiliser $s'appliquent pour le coup un condensé du cycle de soi-même, il va mettre à jour la vue.
```
$scope.getCustomers = function (query) {
selectsService.getCustomers(query).then(function (results) {
$scope.customersSelect = results.data;
$scope.$apply();
console.log($scope.customersSelect);
}, function(error) {
alert(error.data.message);
});
}
```
- Maintenant, il me fait une erreur $digest already in progress lien. Je pense que c'est parce $scope.$apply() est appelé dans l'événement onChange.
- faire quelque chose comme setTimeout(function(){ $scope.$apply(); }, 200);
- Il n'a pas aidé non plus. L'erreur $digest already in progress ne se produit plus, mais la saisie semi-automatique ne fonctionne toujours pas.
InformationsquelleAutor Zohaib Ijaz

Vous devez vous connecter pour publier un commentaire.