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>

angularjs

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

一旦用户选择了一个类别，我想使用get方法将该数据发送到api。

您可以将ng-change添加到<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>

并在Controller中写道：

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

附注：

如果您想通过angularjs方式构建select选项，请使用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

根据下拉值显示表

1 个答案: