Angstream UI Bootstrap Typeahead, sortie multiple?

Question

J'utilise donc Typeahead pour récupérer des informations à partir d'un fichier json. Ça a marché, pas de problème. Mais je voudrais "autocomplete" quelques autres champs de saisie quand j'ai sélectionné un objet dans le premier.

Disons que le premier champ ressemble à ceci:

<input type="text" class="form-control" id="supertag" ng-model="selected" uib-typeahead="title.title for title in tags | filter:$viewValue | limitTo:8"/> 

Il affiche title.title dans ce domaine d'entrée, grand! J'ai essayé d'aborder ce dilemme de plusieurs façons, mais je n'arrive pas à remplir le reste des champs de saisie lorsque le premier est sélectionné et prêt. Je voudrais avoir quelque chose comme title.subtitle sur le prochain, mais il ne semble pas être aussi simple.

Qu'est-ce qui me manque? Cela ne fonctionne pas par exemple:

<input type="text" class="form-control" id="rubrik" value="{{title.subtitle}}"/> 

Merci!

Edit: Le JSON ressemble à ceci:

{ 
title: 'title', 
subtitle: 'subtitle', 
id: 'id' 
}, 
{ 
title: 'title', 
subtitle: 'subtitle', 
id: 'id' 
}, 

Edit: code supplémentaire pour la comparaison entre les différents fichiers JSON.

Donc, c'est ce que les points de champ d'entrée à:

$http.get(tagUrl) 
     .then(function(res) { 
      $scope.tags = res.data; 
     }) 

Et onSelect:

$scope.onSelect = function($item, $model, $label) { 
     $scope.id = $item.id; 
     $scope.title = $item.title; 
     $scope.selected = $item.selected; 
     $scope.subtitle = $item.subtitle; <- undefined because it only exists in JSON2, not in JSON1. 
     console.log($scope.id); 
    }; 

Voici où je voudrais la fonction de faire une comparaison sur l'ID entrées. Il existera toujours à JSON1 (tagUrl) mais je veux aussi qu'il regarde s'il existe dans JSON2 (superUrl) avant d'aller plus loin (et aussi, s'il existe, mettre $ scope.subtitle = $ item.subtitle dans le champ de saisie correspondant) . J'ai essayé différentes approches avec les instructions if mais à mon meilleur, je ne suis pas défini.

J'ai ceci pour un ng-repeat qui liste toutes les superUrls sur la page qui pourraient être utiles pour obtenir ce que je veux.

$http.get(listSuperUrl) 
     .then(function(res) { 
      $scope.current = res.data; 
     }) 

Answer 1

Vous devez insérer une typeahead-on-select="vm.onSelectItem($item, $model, $label) à l'élément d'entrée SuperTag, (si vous utilisez le contrôleur comme vm) ou typeahead-on-select="onSelectItem($item, $model, $label) (si vous utilisez la portée de $ dans votre contrôleur). Vous pouvez nommer onSelectItem comme vous voulez, c'est une fonction que j'ai utilisée pour l'illustration.

<input type="text" ng-model="subtitle" class="form-control" id="rubrik"/> 

Une fois que cela est fait dans votre vue, allez à votre contrôleur, définissez:

vm.onSelectItem = function($item, $model, $label){ 
    /*bind your subtitle ngModel to $item.subtitle*/ 
    vm.subtitle = $item.subtitle; 
} 

ou

$scope.onSelectItem = function($item, $model, $label){ 
/*bind your subtitle ngModel to $item.subtitle*/ 
$scope.subtitle = $item.subtitle; 
} 

Cela devrait le faire pour vous, laissez-moi savoir s'il doesn 't comme je n'ai pas essayé cela dans le code.

(ne pas oublier de marquer comme réponse si cela aide!)