0

我使用typeahead角引導這是一個非常整潔的指令,但我遇到一個困難,以獲得選擇值時使用它與數組(需要自定義模板)。我不能得到的預輸入選擇值(它顯示正常,但爲[對象對象]到目標控制器通過從一組對象的角度ui typeahead - 如何獲得選擇值

這是形式:

<form ng-submit="startSearch(search.term , false, true)" novalidate> 
<input typeahead-editable="true" typeahead="item as label(item) for item in startSearch($viewValue, true)| limitTo:10" 
required type="text" class="searchInput" ng-model="search.term" 
typeahead-template-url="views/search/typeahead.html" /> <!--| filter:$viewValue typeahead-on-select="goState(selectState(select), label(select)"--> 
<button class="searchBT" ng-submit="startSearch(search.term , false, true)"><i class="icon-search"></i></button> 

和(相關)控制器:

$scope.search = {}; 
     $scope.startSearch = function(term, suggest, submitted){ 
      var deferred = $q.defer(); 
      if (submitted) { 
       console.log($scope.search) 
       $state.go('search.home',{'term': $scope.search.term }); //term gets [object object] instead of the displayed name 
      } else { 
        searchService.doSearch(term, suggest).then(function(data){ 
         "use strict"; 
//      console.log('data',data) 
         if (suggest){ 
          deferred.resolve(data) 
         } 
        }, function(err){ 
         "use strict"; 
         $log.debug('err',err); 
        }) 
      } 
      return deferred.promise; 
     } 

     }; 

     $scope.label = function(item){ 
      "use strict"; 
      //select label 
      if (!item) { 
       return; 
      } 


      return item.symbol || (item.first_name +" " + item.last_name) 
     } 

來總結我的問題:

我得到從typeahead選擇列表中顯示的值(我得到一個正確的)似乎不正確地更新模型(search.term),我在那裏得到一些[object object]結果。 如果我在輸入字段中手動輸入一個值並提交,我確實得到了正確的值(以及狀態轉換等)。

使事情變得更復雜一點,列表包含不同類型的對象,所以我要處理關於具有函數/過濾器的對象的一些邏輯,不能只是抓住一個字段

感謝您的幫助!

回答

0

我認爲這可能是因爲您缺少對象的屬性名稱。 我已經根據你的代碼here寫了一個plunk。我剛剛剝離了服務調用是一個硬編碼數組。

要特別注意返回的對象具有「值」和「文本」屬性。

var results = []; 
angular.forEach([{Val: 1, Text: "AngularJS"}, {Val: 2, Text: "EmberJS"}, {Val: 3, Text: "KnockoutJS"}], function(item){ 
    if (item.Text.toLowerCase().indexOf(term.toLowerCase()) > -1) { 
    results.push(item); 
    } 
}); 
    return results; 

而且也期待在標記爲使用對象的實際文本屬性填充「預輸入」屬性的方式:

typeahead="item.Text for item in startSearch($viewValue)| limitTo:10"