ドロップダウン値に基づいて表を表示

Question

ドロップダウンメニューでユーザーが選択した内容に基づいて質問表を表示したい。ユーザーがカテゴリを選択すると、getメソッドを使用してそのデータをAPIに送信します。私はコントローラとしてangularjsを使用しています。問題は、getメソッドを呼び出した後にテーブルによって値が移入されていないことです。私のアプローチが正しいかどうかはわかりません。ユーザーがカテゴリを選択すると

HTML

<h3>View Quiz By:</h3> 

    <select name="singleSelect" ng-model="data.singleSelect"> 
     <option value="math">Math</option> 
     <option value="science">Science</option> 
     <option value="history">History</option> 
     <option value="compscience">Computer Science</option> 
     <option value="other">Other</option> 
    </select> 
    <tt>singleSelect = {{data.singleSelect}}</tt> 

    <br><br><br> 



    <div ng-controller="selectOptionController"> 
     <table> 
      <tr> 
       <th>Id</th> 
       <th>Question</th> 
       <th>Answer</th> 
       <th>OptionA</th> 
       <th>OptionB</th> 
       <th>OptionC</th> 
       <th>OptionD</th> 
      </tr> 
      <tr ng-repeat="row in result"> 
       <td>{{row.id}}</td> 
       <td>{{row.question}}</td> 
       <td>{{row.answer}}</td> 
       <td>{{row.optionA}}</td> 
       <td>{{row.optionB}}</td> 
       <td>{{row.optionC}}</td> 
       <td>{{row.optionD}}</td> 
      </tr> 
     </table> 
    </div> 

が

angular.module('staticSelect', []) 
.controller('selectOptionController', ['$scope', function($scope) { 
    $scope.data = { 
      singleSelect: null 
    }; 

    $http.get("http://localhost:8080/quiz/webapi/quiz/"+data) 
    .then(function(response) { 
     $scope.result = response.data; 
    }); 

}]); 

Answer 1

をangularjs、私はgetメソッドを使用してAPIにそのデータを送信したいです。

あなたの<select>

<select name="singleSelect" ng-model="data.singleSelect" ng-change="onChange()"> 
    <option value="math">Math</option> 
    <option value="science">Science</option> 
    <option value="history">History</option> 
    <option value="compscience">Computer Science</option> 
    <option value="other">Other</option> 
</select> 

にし、コントローラの書き込みにng-changeを追加することができます。

$scope.onChange = function(){ 
    $http.get("http://localhost:8080/quiz/webapi/quiz/"+$scope.data.singleSelect) 
.then(function(response) { 
    $scope.result = response.data; 
}); 
}; 

---

Aサイドノート：あなたはselectを構築したい場合は

オプションangularjs方法によってng-optionsを使用します。

$scope.list = [ 
    {value: 'science', name: 'Science'}, 
    {value: 'history', name: 'History'}, 
    {value: 'compscience', name: 'Computer Science'}, 
    {value: 'other', name: 'Other'} 
    ]; 

とあなたの選択：

<select name="singleSelect" 
     ng-model="data.singleSelect" 
     ng-change="onChange(data.singleSelect)" 
     ng-options="item.value as item.name for item in list" 
> </select> 

Demo