从服务器获取数据并在选择控件中使用ng选项无法显示选项

Getting data from the server and using ng-options in select control is failing to show options

本文关键字:选项 ng 显示 控件 获取 服务器 数据 选择      更新时间:2023-09-26

这是我的HTML

<div ng-app="timeTable" ng-controller="addCoursesCtrl">
            <button class="btn btn-primary" ng-click="addNewCourse()">Add New Course</button><br/><br/> 
            <fieldset ng-repeat="choice in choices">
                <div class="row">
                    <div class="col-md-6">
                        <select class="form-control" ng-model="choice.type" ng-options="s for s in coursetoAdd">
                            <option value="{{s.shortCut}}">{{s.name}}</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <input type="text" placeholder="Enter Course Name" name="" class="form-control" ng-model="choice.course"/>
                    </div>
                </div>
                <br/>
            </fieldset>
            <button class="btn btn-primary" ng-click="convertAndSend()">Submit</button>
        </div>

这是js

var timeTable = angular.module("timeTable",[]);
timeTable.controller("addCoursesCtrl", function ($scope,$http) {
    $scope.choices = [{ course: '', type: '' }];
    $scope.coursetoAdd ;
    $http.get("/Semster/getSuggtedCourses").then(function (response) {
        $scope.coursetoAdd = response.data;
    });
    $scope.addNewCourse = function () {
        var newITemNo = $scope.choices.length + 1;
        $scope.choices.push({ course: '', type: '' });
    };
    $scope.convertAndSend = function () {
        var asJson = angular.toJson($scope.choices);
        console.log(asJson);
        $http.post('/Semster/Add', asJson);
    };
});

这段代码绑定了一个对象{"课程":…,"类型":…},每次你点击添加课程,并动态添加输入字段时,我的问题是选择控件,我从服务器获取数据并将其与ng-optin一起使用,但它所显示的只是选择选项中的[对象对象],而不是真正的值。

假设从getSuggestedCourses返回的数据是一个对象数组,则ng选项选择器:

s for s in courseToAdd

将s绑定到数组中的每个对象。你需要像这个一样绑定到对象中的字段

s.value as s.name for s in courseToAdd