在这种情况下,我使用ui-bootstrap typeahead从外部api捕获对象。使用select回调我获取该对象并将结果设置在我的控制器中的单独函数中。
问题是我希望将这些结果发送到一个单独的api,并使用我已经设置的点击功能。我的问题是如何将提前输入的结果导入点击功能发布?用户流程如下。
<div>
<input type="text" placeholder="Find A Game"
typeahead-on-select="setGames($item)"
ng-model="asyncSelected"
typeahead="test.name for test in getGames($viewValue)"
typeahead-loading="loadingLocations" typeahead-min-length="3"
typeahead-wait-ms="500" typeahead-select-on-blur="true"
typeahead-no-results="noResults">
</div>
<div ng-show="noResults">
No Results Found
</div>
<button ng-disabled="!asyncSelected.length"
ng-click="addtodb(asyncSelected)">Add To Database</button>
如您所见,标签设置为项目名称,这可以正常工作。当用户选择名称时,然后使用 typeahead-on-select =&#34; setGames($ item)&#34; 将整个对象发送给自己的功能。从那里我想要获取对象并将其传递给另一个函数,您可以在按钮标签中看到ng-click。我目前已经通过了模型,但我真正想要的是从select事件中传递$ item中的整个对象。到目前为止,我的控制器看起来像这样:
angular.module('2o2pNgApp')
.controller('GiantCtrl', function ($scope, $http, TermFactory, $window, SaveFactory) {
$scope.getGames = function(val) {
return $http.jsonp('http://www.example.com/api/search/?resources=game&api_key=s&format=jsonp&limit=5&json_callback=JSON_CALLBACK', {
params: {
query: val
}
}).then(function(response){
return response.data.results.map(function(item){
return item;
});
});
};
$scope.setGames = function (site) {
var newsite = site;
};
$scope.addtodb = function (asyncSelected, newsite) {
TermFactory.get({name: asyncSelected}, function(data){
var results = data.list;
if (results === undefined || results.length === 0) {
SaveFactory.save({vocabulary:'5', name:newsite.name, field_game_id:newsite.id}, function(data) {
$window.alert('All Set, we saved '+asyncSelected+' into our database for you!')
});
} else {
// do stuff
});
}
});
无论我做什么,我似乎无法将整个$ item对象传递给此click函数以发布我需要的所有信息。
答案 0 :(得分:0)
通过评论中的新发展:
$ item仅在本地可用于typeahead-on-select ...你可以 要么将其分配给控制器中的某个模型,要么实际上, 使typeahead模型成为项目:typeahead =“test as test.name for getGames($ viewValue)“ - New Dev