Angular-UI Bootstrap Typeahead, несколько выходов?

Итак, я использую Typeahead для извлечения некоторой информации из файла json. Заработало, без проблем. Но я хотел бы «автозаполнить» несколько других полей ввода, когда я выбрал объект в первом.

Допустим, первое поле выглядит так:

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

Он отображает title.title в этом поле ввода, отлично! Я пытался решить эту дилемму несколькими способами, но не могу заполнить остальные поля ввода, когда первое выбрано и готово. Я хотел бы иметь что-то вроде title.subtitle на следующем, но это не кажется таким уж прямым.

Что мне не хватает? Это не работает, например:

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

Спасибо!

Изменить: json выглядит примерно так:

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

Изменить: дополнительный код для сравнения разных файлов json.

Вот на что указывает поле ввода:

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

И при выборе:

$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);
    };

Вот где я хотел бы, чтобы функция выполняла сравнение входных идентификаторов. Он всегда будет существовать в JSON1 (tagUrl), но я также хочу, чтобы он смотрел, существует ли он в JSON2 (superUrl), прежде чем идти дальше (а также, если он существует, установите $scope.subtitle = $item.subtitle в соответствующее поле ввода) . Я пробовал разные подходы с операторами if, но в лучшем случае я получаю неопределенность.

У меня есть это для ng-repeat, в котором перечислены все superUrls на странице, которые могут быть полезны для получения того, что я хочу.

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

angularjs angular-ui-bootstrap bootstrap-typeahead angular-ui-typeahead
person mtorn    schedule 28.06.2016    source источник
comment
чтобы проверить, существует ли superUrl, вам нужно использовать truey. По сути, вы можете сделать что-то вроде if(superUrl), это сообщит вам, существует ли он.   -  person Leibniz    schedule 28.07.2016

Ответы (1)


arrow_upward
2
arrow_downward

Вам нужно добавить typeahead-on-select="vm.onSelectItem($item, $model, $label) к элементу ввода супертега (если вы используете контроллер как виртуальную машину) или typeahead-on-select="onSelectItem($item, $model, $label) (если вы используете $scope в своем контроллере). Вы можете называть onSelectItem как хотите, это функция, которую я использовал для иллюстрации.

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

Как только это будет сделано в вашем представлении, перейдите к своему контроллеру, определите:

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

or 

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

Это должно сделать это за вас, дайте мне знать, если это не так, поскольку я не пробовал это в коде.

person Leibniz    schedule 28.06.2016
comment
Вау, спасибо! С небольшими изменениями в вашем коде это сработало! - person mtorn; 29.06.2016
comment
@mtom, приятно слышать, что это помогло :) - person Leibniz; 30.06.2016
comment
Можно ли настроить onSelect для просмотра другого файла JSON через http.get? Я хочу провести некоторое сравнение (между json1 и json2), но не могу заставить его работать должным образом. - person mtorn; 27.07.2016
comment
Да, вы можете это сделать, в onselect вы можете выполнять любую логику, которую хотите, включая вызовы ajax. Можете ли вы поделиться кодом, который вы используете? - person Leibniz; 27.07.2016
comment
О, хорошо, это то, на что я надеялся. Я обновил свой первый пост некоторым кодом (немного урезанным из-за экспериментов, которые не сработали). - person mtorn; 28.07.2016