Question

我是AngularJS的初学者，试图使用它来构建模板。

我的points.html页面是这样的：

          <form ng-app="stdapp"  ng-submit="save()" ng-controller="SubmissionController">

                <div class="select">
                    <label> Select Student </label>
                    <select ng-options="student.name for student in students" ng-model="student"></select>
                </div>
                <div class="checkbox">
                    <label ng-repeat="behavior in behaviors">
                      <input type="checkbox" ng-model="behavior"> {{behavior.name}}
                    </label>
                </div>
                <div>
                    <button type="button" class="btn btn-info">Mark</button>
                </div>
            </form>

我的points.js看起来像这样：

 var app = angular.module('stdapp', []);
app.controller('SubmissionController', function($scope, $http) {
    $scope.save = function() {
        console.log($scope.student);
        console.log($scope.behavior);
};

$http.get("/manager/api/std/useraccount/").success(function(response) {
    $scope.students = response.objects;
}).error(function() {
    alert("An Unexpected error occured");
});

$http.get("/manager/api/std/behavior/").success(function(response) {
    $scope.behaviors = response.objects;
}).error(function() {
    alert("An Unexpected error occured");
});
});

这些API工作正常，我以json格式从服务器获取数据。这是第一次API GET调用的响应： -

{
    "meta": {
        "limit": 20, "next": null, "offset": 0, "previous": null, "total_count": 3}, 
    "objects": [
        {"age": 12, "clas": 5, "id": "559f55347abead2404a61563", "name": "harish", "resource_uri": "/manager/api/std/useraccount/559f55347abead2404a61563/", "studentid": 1}, 
        {"age": 13, "clas": 5, "id": "559f555a7abead2404a61564", "name": "zaya", "resource_uri": "/manager/api/std/useraccount/559f555a7abead2404a61564/", "studentid": 2}, 
        {"age": 11, "clas": 5, "id": "559f556f7abead2404a61565", "name": "harsha", "resource_uri": "/manager/api/std/useraccount/559f556f7abead2404a61565/", "studentid": 3}
    ]
}

和第二次获取的json回复是

{
"meta": {"limit": 20, "next": null, "offset": 0, "previous": null, "total_count": 3}, 
"objects": [
    {"id": "559f560b7abead2404a61566", "name": "Doing Homework", "points": 3, "resource_uri": "/manager/api/std/behavior/559f560b7abead2404a61566/"}, 
    {"id": "559f56227abead2404a61567", "name": "Disrrupting Class", "points": -2, "resource_uri": "/manager/api/std/behavior/559f56227abead2404a61567/"},         
    {"id": "559f56337abead2404a61568", "name": "Helping", "points": 5, "resource_uri": "/manager/api/std/behavior/559f56337abead2404a61568/"}]}

但我仍然无法在模板中正确呈现收到的对象数组。

我写了一个表格，最后我想提交所选数据，所以我也想知道如何在这种情况下写一个提交($http.post())。

有人可以帮助我，我已经尝试了谷歌，但我得到的例子要么非常高，要么非常基本。

Answer 1

除非您添加ngModel指令，否则模板不会呈现。这是必需的因为绑定数据到表单控件没有任何意义，没有机制来获取数据以进行进一步处理（提交）。

您的HTML应该是这样的：

    <div class="select" ng-controller="PointspageController">
        <label> Select Student </label>
        <select ng-options="student.name for student in students" ng-model="student.name"></select>
    </div>

然而，这只是一个问题。你需要确保你做下一件事：

将您的HTML放入公共控制器，例如ng-controller="SubmissionController"，您可以在其中定义要用作提交处理程序的函数：
```
app.controller('SubmissionController', function($scope) {
    $scope.save = function() {
        console.log($scope.student);
    };
});
```

在表单上添加ngSubmit指令：

<form ng-app="stdapp" ng-submit="save()" ng-controller="SubmissionController">
    <!-- ... -->
</form>

无法使用ng-controller

1 个答案: