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