AngularJS does not repeat array

Question

So the problem is that ng-repeat in list.html is not showing anything(or is it even getting anything?). I would also like to know if that if-statement in my $scope.save function is stupid way to do that or no (i mean changing checkbox boolean to "yes" or "no" string).

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

See How to create a Minimal And Verifiable Example: stackoverflow.com/help/mcve — amanuel2
– amanuel2, Commented Apr 30, 2016 at 20:25

Rhumborl · Accepted Answer · 2016-04-30 20:37:07Z

2

returnList is a method of dataservice, not a property of type array, so your mainController should call it with brackets:

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

answered Apr 30, 2016 at 20:37

Rhumborl

16.7k4 gold badges41 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

iWillBeMaster Over a year ago

How do you guys see this stuff so fast? I have to waste like 2 hours in a day for mistakes like these. But yeah thanks a lot !

Collectives™ on Stack Overflow

AngularJS does not repeat array

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related