使用 angularjs 更新操作

Question

我正在尝试更新包含多个数组的 json 集合。我正在尝试使用 $resource 服务与数据进行交互。

我使用 PUT 方法添加了一个更新选项，但它在下面抛出异常

错误：vm.updatetour.$update 不是函数。

我已经将它放入一个非工作的 plunker 中，其中包含 json 数据以及 http://plnkr.co/edit/5wtf0BHThg7rORJDYleX?p=catalogue

感谢任何帮助

//// this is the controller

(function() {
  angular.module('Admin', ['ui.router', 'ngResource', 'Services'])
 .config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/');

$stateProvider
  .state('admin', {
    url: '/',
    templateUrl: '/app/admin/admin.html',
    controller: 'AdminController as vm'
  })
  .state('admin.tournaments', {
    url: 'tournaments',
    templateUrl: '/app/admin/tournament.html',
    controller: 'AdminController as vm'
  })
  .state('admin.users', {
    url: 'users',
    templateUrl: '/app/admin/users.html',
    controller: 'AdminController as vm'
  })
  .state('admin.createTournament', {
    url: 'create',
    templateUrl: '/app/admin/newTournament.html',
    controller: 'AdminController as vm'
  })
  .state('admin.teams', {
    url: 'teams',
    templateUrl: '/app/admin/teams.html',
    controller: 'AdminController as vm'
  })

  }])

.controller('AdminController', AdminController);

AdminController.$inject = ['TournamentService','UserService','TeamService', '$q', '$location','$scope','$filter','$http','$stateParams','$resource'];
function AdminController(TournamentService, UserService, TeamService, $q, $location, $scope, $filter, $http, $stateParams, $resource) {
var vm = this;
var tournaments = TournamentService.query();
var users = UserService.query();
var teams = TeamService.query()
vm.availablePlayers = [];
vm.newTournament = {};
vm.newTournament.teams = [];
vm.isSavingTournament = false;

$q.all([tournaments, users, teams]).then(function(results) {
  vm.users = users;
  vm.availablePlayers = users;
  vm.tournaments = tournaments;
  vm.teams = teams;
  console.log(vm.tournaments)
})

vm.showTournament = function() {
  var tournament = TournamentService.query({id: vm.selectedTournamentId}, function() {
    vm.selectedTournament = tournament[0]
  });
}

var Tourn = $resource('/api/tournaments/:id', {id: '@_id'}, {
  update: {method: 'PUT'},
  query: {method: 'GET', isArray: true}
})


vm.showUpdateTournament = function(form) {

  var updatetour = Tourn.query( { id: vm.selectedTournamentId});
  vm.updatetour = vm.tourTeams;
  vm.updatetour.$update();
    console.log(vm.tourTeams)
};

//// set these checkboxes default value to false and hipchatroom to empty value if it's not specified.
   vm.newTournament.hide = false
   vm.newTournament.playoffs = false
   vm.newTournament.hipchatroom = '';
   vm.newTournament.hipchatkey = '';

   vm.addNewTournament = function(formValid) {
    //console.log(vm.newTournament)
     if(formValid){
      TournamentService.save(vm.newTournament)
       alert('Tournament Saved');
       location.reload();
     }
   }



}

}());


<form novalidate ng-submit="vm.showUpdateTournament(vm.tournamentEdit)" method="post" name="vm.tournamentEdit" ng-show="vm.selectedTournament" ng-model="vm.selectedTournament" >

  <h1>{{vm.selectedTournament.name}}</h1>

  <div class="row">
      <div class="form-group col-sm-6">
      <label>Hipchat Room</label>
      <input type="text" class="form-control" ng-model="vm.selectedTournament.hipchatroom">
      </div>
    <div class="form-group col-sm-6">
      <label>Hipchat Key</label>
      <input type="text" class="form-control" ng-model="vm.selectedTournament.hipchatkey">
    </div>
  </div>
  <br>
  <div class="form-group">
    <span style="padding:5px">
      <label for="">Hide Tournament</label>
      <input type="checkbox" ng-model="vm.selectedTournament.hide">
    </span>
     | 
      <span style="padding:5px">
        <label for="">Start Playoffs</label>
        <input type="checkbox" ng-model="vm.selectedTournament.playoffs">
      </span>
   </div>


  <h2>Teams</h2>
  <div class="table-responsive">
    <table class="table table-bordered" width="100%">
      <thead>
        <tr>

          <th>Team Name</th>
          <th>Players</th>
          <th>
            ST
          </th>
          <th>
            PWR
          </th>

        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="teamz in vm.selectedTournament.teams">

          <td width="130" style="vertical-align:middle">



            <select name="team" class="form-control" ng-options="team.name for team in vm.teams track by team.teamid " ng-model="vm.tourTeams[$index]" ng-disabled="vm.selectedTournament.games.length > 0 || vm.selectedTournament.playoffGames.length > 0 " required >
              <option value=""></option>
               <!-- <input text name="team"  ng-model="vm.tourTeams[$index].name"> -->
          </td>
          <td><!-- {{ vm.getPlayerName(team.player1).local.fullname }}<br>{{vm.getPlayerName(team.player2).local.fullname}} -->


            <table width="30%">
              <tr>
                <td style="padding-bottom:10px">
                  <select name="user1" class="form-control" ng-options="user.local.fullname for user in vm.users track by user._id " ng-model="vm.tourPlayer1[$index]" required>
                    <option value=""></option>
                <td>
              </tr>
              <tr>
                <td>
                  <select name="user2" class="form-control" ng-options="user.local.fullname for user in vm.users track by user._id " ng-model="vm.tourPlayer2[$index]" required>
                    <option value=""></option>
                </td>
              </tr>

           </table>
          </td>
          <td class="statDetail">{{team.strength}}</td>
          <td class="statDetail">{{team.PWR}}</td>

        </tr>
      </tbody>
    </table>
  </div>

  <h2>Games</h2>
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <th>Game #</th>
        <th>Date</th>
        <th>Final Score</th>
      </thead>
      <tbody>
        <tr ng-repeat="game in vm.selectedTournament.games | orderBy: '-id'">
          <td>{{ game.id }}</td>
          <td>{{ game.gameDate | date: medium }}</td>
          <td>
            <span ng-class="{ 'winner': game.awayTeamScore > game.homeTeamScore }">{{  game.awayTeam.name }}({{ game.awayTeamScore }})</span>
            @
            <span ng-class="{ 'winner': game.homeTeamScore > game.awayTeamScore }">{{ game.homeTeam.name }} ({{game.homeTeamScore}})</span>
            <span class="label label-warning" ng-show="game.hadOT && !game.hadSO">OT</span>
            <span class="label label-danger" ng-show="game.hadSO">SO</span>

          </td>
        </tr>
        <tr ng-show="vm.selectedTournament.games.length < 1 "><td colspan="3">no games played at this time.</td></tr>
      </tbody>
    </table>
  </div>
  <h2>Playoffs</h2>
  <div class="table-responsive">
    <table class="table table-striped">
      <thead>
        <th>Game #</th>
        <th>Date</th>
        <th>Final Score</th>
      </thead>
      <tbody>
        <tr ng-repeat="playoffgame in vm.selectedTournament.playoffGames | orderBy: '-id'">
          <td>{{ playoffgame.id }}</td>
          <td>{{ playoffgame.gameDate | date: medium }}</td>
          <td>
            <span ng-class="{ 'winner': playoffgame.awayTeamScore > playoffgame.homeTeamScore }">{{  playoffgame.awayTeam.name }}({{ playoffgame.awayTeamScore }})</span>
            @
            <span ng-class="{ 'winner': playoffgame.homeTeamScore > playoffgame.awayTeamScore }">{{ playoffgame.homeTeam.name }} ({{playoffgame.homeTeamScore}})</span>
            <span class="label label-warning" ng-show="playoffgame.hadOT && !playoffgame.hadSO">OT</span>
            <span class="label label-danger" ng-show="playoffgame.hadSO">SO</span>

          </td>
        </tr>
        <tr ng-show="vm.selectedTournament.playoffGames.length < 1 "><td colspan="3">no games played at this time.</td></tr>
      </tbody>
    </table>
  </div>
<button class="btn btn-primary" type="submit">Update</button>
</form>

Answer 1

在代码中添加方法

vm.updatetour=function(form) {
      alert("Update has been called");
      // update your record here by calling the web API
    };

Answer 2

vm.updatetour 变量没有 $resource 对象引用。理想情况下，您应该对 TournamentService 对象执行 update 操作。

vm.showUpdateTournament = function(form) {
   var updatetour = Tourn.query( { id: vm.selectedTournamentId});
   vm.updatetour = vm.tourTeams;
   TournamentService.update(vm.updatetour).$promise.then(function(){
       console.log("Updation completed")
   });
};