無法繞過NG控制器

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> 

然而，這僅僅是一個問題。你需要確保你做下一件事：

1. 把你的HTML到像ng-controller="SubmissionController"共同控制器，你需要定義函數用作提交處理程序：

   app.controller('SubmissionController', function($scope) { 
       $scope.save = function() { 
        console.log($scope.student); 
       }; 
   }); 
   

2. 添加ngSubmit指令上形式：

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