エクササイズ関連のデータ、つまりエクササイズ名、強度レベル、説明などを示すテンプレートと、その特定のエクササイズの評価を送信するためのボタンがあります。
このデータはすべて、次のように「videoCtrl」から API エンドポイントを呼び出すバックエンドから取得されます。
.controller('videoCtrl', function($scope,$stateParams, $http, $ionicPopup, djangoAuth) {
$scope.exercise_type='';
$scope.exercise_description='';
$scope.exercise_video_url='';
/** To fetch the initial set of exercises **/
$http.get("/api/exercises/get_exercise/").then(function(response){
$scope.initial_data=response.data;
angular.forEach($scope.initial_data, function(item){
$scope.exercise_type=item.exercise_type;
$scope.intensity_level=item.intensity_level;
$scope.exercise_description=item.description;
$scope.exercise_video_url=$sce.trustAsResourceUrl(item.video_url);
})
});
//Function to play next video
$scope.playNextTest = function(){
var confirmPopup = $ionicPopup.confirm({
title: 'Confirm!',
template: 'Are you sure about your rating?'
});
confirmPopup.then(function(res) {
if(res) {
$scope.isDisabled = true;
console.log('You are sure');
} else {
console.log('You are not sure');
}
});
};
ボタンをクリックすると確認を求め、ユーザーが「はい」と答えた場合は、別の API エンドポイントに別のリクエストを送信してアクションを実行します。
ボタンをクリックした後に何らかの方法でページを更新して、コントローラーが再度読み込まれ、リストの次の演習が取得されるようにしたいと考えています。
これはどのように行うことができますか?
私のテンプレートは次のようになります。
<div align="center">
<h4>Intensity level is {{intensity_level}}</h4>
</div>
<div align="center" class="card" >
<span class="info"><button class="button button-clear ion-information" ng-click="showBestStretchAlert()"></button></span>
<p>
{{exercise_description}}
</p>
</div>
<!-- Div that shows the video -->
<div>{{exercise_video_url}}
<iframe margin="0" padding="0" border="none" width="420" height="345" frameBorder="0"
ng-src="{{exercise_video_url}}">
</iframe>
</div>
<div >
<div class="row">
<div class="col-33">
<!--First happy smiley-->
<ion-radio ng-model="emotion" ng-value='H' ng-disabled="isDisabled" ng-click="playNextTest()">
<div class='smiley-green floatleft'>
<div class='left-eye'></div>
<div class='right-eye'></div>
<div class='smile'></div>
</div>
</ion-radio>
</div>