2016-04-30 11 views
2

したがって、問題はlist.htmlのng-repeatが何も表示していないことです(何かが得られますか?)。私はまた、もし私の$ scope.save関数のif文がそれを行う愚かな方法かどうかを知りたいと思う(つまり、チェックボックスブール値を "yes"または "no"文字列に変更することを意味する)。AngularJSは配列を繰り返さない

index.htmlを

<!DOCTYPE html> 
<html ng-app="app"> 
    <body ng-controller="mainController"> 
     <div ng-view></div>  
    </body> 
</html> 

するlist.html

<form role="form"> 
    <label>Nimi:</label> 
    <input ng-model="newcontact.name" type="text" class="form-control"> 
    <label>Email:</label> 
    <input ng-model="newcontact.email" type="text" class="form-control"> 
    <label>Ruokavalinta:</label> 
    <select ng-model="newcontact.ruoka" class="form-control"> 
     <option>Kala</option> 
     <option>Liha</option> 
     <option>Kasvis</option> 
    </select> 
    <label><input ng-model="newcontact.sauna" type="checkbox"> Osallistun saunailtaan</label> 
<button ng-click="save()" class="btn btn-default">Submit</button> 
</form> 
form.html

<table> 
    <tbody> 
     <tr ng-repeat="object in list"> 
      <td>{{object.name}}</td> 
      <td>{{object.email}}</td> 
      <td>{{object.ruoka}}</td> 
      <td>{{object.sauna}}</td> 
     </tr> 
    </tbody> 
</table> 

app.js

var app = angular.module("app", ["ngRoute"]); 

app.config(["$routeProvider", "$locationProvider", 
    function($routeProvider, $locationProvider){ 
     var app = angular.module("app", ["ngRoute"]); 

    app.config(["$routeProvider", "$locationProvider", 
     function($routeProvider, $locationProvider){ 
      $routeProvider 
        .when 
      ("/list", {templateUrl: "harjoitus10/templates/list.html", 
         controller: "mainController"}) 
        .when 
      ("/form", {templateUrl: "harjoitus10/templates/form.html", 
         controller: "mainController"}) 
        .otherwise({redirectTo: "/"}); 
      $locationProvider.html5Mode({enabled:true, requireBase:false}); 
     }]); 

    app.service("dataservice", function(){ 
     var list = [{}]; 

     this.save = function(newcontact){ 
      list.push(newcontact); 
     }; 
     this.returnList = function(){ 
      return list; 
     }; 
    }); 

    app.controller("mainController", function($scope, dataservice){ 

     $scope.list = dataservice.returnList; 

     $scope.save = function(){ 
      if($scope.newcontact.sauna){ 
       $scope.newcontact.sauna = "joo"; 
      }else{ 
       $scope.newcontact.sauna = "ei"; 
      } 
      dataservice.save($scope.newcontact); 
      $scope.newcontact = {}; 
     }; 
    }); 
+0

ミニマルかつ検証例を作成する方法を参照してください:あなたのmainControllerは括弧でそれを呼び出す必要がありますので、10 returnListは、dataserviceの方法ではなく、配列型のプロパティですhttp://stackoverflow.com/help/ mcve – amanuel2

答えて

2
app.controller("mainController", function($scope, dataservice){ 

    $scope.list = dataservice.returnList(); 

    $scope.save = function(){ 
     if($scope.newcontact.sauna){ 
      $scope.newcontact.sauna = "joo"; 
     }else{ 
      $scope.newcontact.sauna = "ei"; 
     } 
     dataservice.save($scope.newcontact); 
     $scope.newcontact = {}; 
    }; 
}); 
+0

あなたはどうやってこのようなものをとても速く見ますか?私はこれらのような間違いのために1日に2時間のように無駄にする必要があります。でも、ありがとう! – iWillBeMaster