Question

所以问题是list.html中的ng-repeat没有显示任何内容（或者甚至是什么东西？）。我还想知道我的$ scope.save函数中的if语句是否是愚蠢的方式来做或不（我的意思是将复选框布尔值更改为＆＃34;是＆＃34;或者＆＃34; no＆＃34;字符串）。

的index.html

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

form.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>

list.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 = {};
        };
    });

Answer 1

returnList是dataservice的方法，而不是数组类型的属性，因此您的mainController应使用括号调用它：

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 = {};
    };
});

AngularJS不重复数组

1 个答案: