如何使AngularJS REST服務調用來填充表並設置默認值

我有一個AngularJS前端和REST（澤西島）後端，它讀取教師分配給學生的書名列表。有兩個視圖/頁面 - 列表和編輯。列表頁面是顯示學生名稱和當前分配的書名的表格。如何使AngularJS REST服務調用來填充表並設置默認值

老師可以選擇編輯分配給學生的書。在選擇「編輯」時，教師將進入編輯視圖/頁面，該頁面包含一個下拉列表，其中包含可用書名的列表以供讀取，並通過調用REST服務Books.getUnassigned（）來填充。當書籍分配給任何學生時，後端將從未分配的列表中刪除書名並將其添加到分配的列表（Books.getAssigned（））。因此，在編輯頁面上，我需要調用服務，將當前分配的圖書標題推送到該數組，並將默認值設置爲當前書名。

<select ng-model="bookToAssign"> 
       <option ng-repeat="book in available_books" value="{{book}}">{{book}}</option> 
    </select>

以下是我的服務電話。加載編輯頁面$ rootScope.args.arg包含一個json對象，其中包含需要從前一頁傳遞到編輯頁面的所有數據 - 驗證該對象是否正確。

$scope.available_books= NaiSvc.getUnassignedBooks.query(
     function(data){ 
      alert('success, got data: ', data); 
      if($rootScope.args.arg !=null){ 
       data.push($rootScope.args.arg); //verified this gets the right object 
       $scope.bookToAssign.setDefault = data[data.length-1]; 
      } 
     }, function(err){ 
      alert('request failed'); 
     } 
    );

在功能成功回調，當我嘗試做bookToAssign.setDefault，我得到的錯誤：類型錯誤：無法讀取的未定義的屬性「setDefault」。有人能指導我這裏發生了什麼？欣賞的幫助

來源

2013-10-27 chapstick

'bookToAssign'似乎是一個JavaScript全球....是它定義在哪裏？另外看起來很奇怪，選擇標籤的'ng-model'具有相同的變量名稱。我的猜測是，如果你使用'$ scope.bookToAssign.setdefault'也會與'ng-model'發生衝突。提供演示 – charlietfl

我想你的意思是寫$ scope.bookToAssign。這應該能解決你的問題。 – mortalapeman

@charlietfl angularJS通過在html中聲明ng-model =「xyz」的方式工作，對象xyz被創建 - 非常酷的功能我認爲 – chapstick

基於你的問題，我寫了一個工作的例子，聽起來像你想要的。看看它，讓我知道如果我錯過了什麼。

我設置了一個着陸頁，列出了一些學生和他們的書。我使用路徑在視圖之間傳遞數據來設置編輯頁面。我使用ng-options指令列出書籍並相應地綁定它們。

演示plunker

的Javascript：

angular.module('plunker', []) 

.config(function($routeProvider) { 
    $routeProvider.when('/list', { 
    templateUrl: 'list.html', 
    controller: 'ListCtrl' 
    }) 
    .when('/edit/:book', { 
     templateUrl: 'edit.html', 
     controller: 'EditCtrl' 
    }) 
    .otherwise({ 
     redirectTo: '/list' 
    }); 
}) 


.service('BookService', function($q, $timeout) { 
    var unassigned = ['English', 'History']; 

    this.getUnassigned = function() { 
    var deferred = $q.defer(); 

    // Simulate async call to server. 
    $timeout(function() { 
     deferred.resolve(unassigned); 
    }); 

    return deferred.promise; 
    }; 

}) 

.controller('EditCtrl', function($scope, $routeParams, BookService) { 
    // student.book needs to be set to avoid null select option 
    $scope.student = {book: $routeParams.book, name: $routeParams.name }; 
    $scope.unassigned = BookService.getUnassigned().then(function(data) { 
    return [$routeParams.book].concat(data); 
    }); 
}) 

.controller('ListCtrl', function($scope) { 
    $scope.students = [{ 
    name: 'Billy', 
    book: 'Math' 
    }, { 
    name: 'Joe', 
    book: 'Science' 
    }]; 
});

HTML：

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.js" data-semver="1.1.5"></script> 
    <script src="app.js"></script> 
    <script type="text/ng-template" id="list.html"> 
     <table> 
     <theader> 
      <tr><td>Name</td><td>Book</td><td></td></tr> 
     </theader> 
     <tbody> 
      <tr ng-repeat="student in students"> 
      <td>{{ student.name }}</td><td>{{ student.book }}</td><td><a ng-href="#/edit/{{ student.book }}?name={{student.name}}">Edit</a></td> 
      </tr> 
     </tbody> 
     </table> 
    </script> 
    <script type="text/ng-template" id="edit.html"> 
     <div> 
     <p>Current Student: {{ student.name }}</p> 
     <label>Select A Book: </label> 
     <select ng-model="student.book" ng-options="book for book in unassigned"> 
     </select> 
     <p> You have selected: {{student.book}}</p> 
    </script> 
    </head> 

    <body> 
    <div ng-view></div> 
    </body> 
</html>

來源

2013-10-27 23:14:41 mortalapeman

謝謝你的朋友。它正是我所需要的！我不得不從

如何使AngularJS REST服務調用來填充表並設置默認值

回答