0
AngularJs、ブートストラップ、APIを使用して検索機能ボタンにJSONを戻していますが、データフローは機能していますが、ボタンを押してブートストラップモーダルポップオーバーを使用して、関連するデータをモーダルに入力するためにAPI JSONをトリガーできます。私はAngularJSとjavascript構造に比較的新しいです。私はこれを行うために単一のコントローラを使用できるはずだと信じています。私はまた、私は単純なjqueryソリューションを使用することができると思う。私は誤解しているか、私の構造を与えられたここでドキュメントを利用する方法を正確にはわからない：https://github.com/angular-ui/bootstrap/tree/d7a48523e437b0a94615350a59be1588dbdd86bd/src/modal検索機能でAngularJSブートストラップモーダルを構成する方法
助けていただければ幸いです！以下
コードである： HTML & JS：
<body id="app" ng-app="app">
<!-- Main view for app-->
<div ui-view class="main-view">
<section class="search-section" ng-if="!displayCity">
<div class="container">
<div class="row">
<div class="vh-100 col-12 d-flex flex-column justify-content-center">
<div class="display-4 text-center"><img src="/images/logo.png"></div>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
<form class="mt-4" ng-submit="searchCity()">
<div class="form-group d-flex">
<input id="query" type="text" placeholder="Search For Your City" class="form-control" />
<button class="btn btn-danger" data-toggle="modal" data-target=".bd-example-modal-lg" style="background-color:#BE2020">Go</button>
</div>
</form>
</div>
</div>
</div>
</section>
</div>
var app = angular.module('app', ['ui.router', 'ui.bootstrap', 'ngAnimate', 'ngTouch']);
app.config(function($stateProvider) {
$stateProvider
.state('index', {
url: '',
templateUrl: 'home.html',
controller: 'homeCtrl'
})
});
app.run(['$rootScope', '$stateParams', '$http', function($rootScope, $stateParams, $http){
//Put your API key here
$rootScope.key = 'apiKey';
}]);
app.controller('homeCtrl', function($rootScope, $stateParams, $http){
$rootScope.displayCity = false;
$stateParams.city_id;
$rootScope.searchCity = function() {
$rootScope.displayCity = true;
let query = $('#q').val();
$http({
method: 'GET',
url: 'apiKey',
headers:{
'user-key': $rootScope.key,
},
params: {
'q': query
}
}).then(function(response){
console.log(response.data);
$rootScope.displayCity = true;
}).catch(function(response){
console.log("something went wrong");
});
};
})