为什么这个AngularJS ng-repeat示例不起作用？

Question

Sorry for asking this. But I searched everywhere and I can't understand why this example is not working:

HTML:

<div ng-controller="VenuesController">
            <div ng-repeat="field in fields">
                <!-- Table -->
                <table class="table">
                    <tr>
                        <td><p align=center>{{field.name}} - {{field.sport}} {{field.price}}
                        </p></td>
                        <td><p align=center></p></td>
                    </tr>
                    <tr ng-repeat="hour in field.hours">
                        <td><p align=center>{{hour.from}} - {{hour.to}}</p></td>
                        <td><p align=center><button type="button" class="btn btn-success">{{hour.state}}</button></p></td>
                    </tr>
                </table>
            </div>
        </div>

JS:

$scope.searchFieldsState = function() {

    $scope.fields = [
        {'name': 'Cancha 1', 'sport': 'Futbol', 'price': '$150',
            'hours' : [
                {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
                ]
        },
        {'name': 'Cancha 2', 'sport': 'Futbol', 'price': '$170',
            'hours' : [
                {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
            ]
        },
        {'name': 'Cancha 3', 'sport': 'Tenis', 'price': '$170',
            'hours' : [
                {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
            ]
        }
    ];
};

I'm sure that the function searchFieldsState is being executed because I used a console.log command for debugging purposes.

So, can anyone see any mistake here? A fresh eye would be helpful.

Thank you very much in advance.

UPDATE:

I initialized the $scope.fields outside the function and ng-repeat worked. But this is not what I need so... The problem persist

I will add my navbar code because I think it is related with this issue:

<ul class="nav navbar-nav navbar-right">
        <li><a href="#/sportmap">SportMap</a></li>
        <li><a href="#/lockerroom">Ingresar</a></li>
        <li ><a ng-controller="VenuesController" href="#/venue">Administraci&oacute;n</a></li>
      </ul>

The route:

myApp.config(['$routeProvider',
function($routeProvider) {
    $routeProvider.
    when('/index', {
        templateUrl: 'search.html',
        controller: 'VenuesController',
        restricted: false
    }).
    when('/venue', {
        templateUrl: 'venue.html',
        controller: 'VenuesController'
    }).
    otherwise({
        redirectTo: '/index'
    });

}]);

Thank you guys!

---

Updating with the working code:

The HTML file with the ng-repeat was ok.

I had to modify the navbar.html template

<ul class="nav navbar-nav navbar-right">
        <li><a href="#/sportmap">SportMap</a></li>
        <li><a href="#/lockerroom">Ingresar</a></li>
        <li ><a href="#/venue/1" >Administraci&oacute;n</a></li>
</ul>

So then I changed the route

when('/venue/:venueid', {
   templateUrl: 'venue.html',
   controller: 'VenuesController'
}).

with this I receive a parameter called venueid. And then...

the magical trick based in Carlos Barcelona suggestion:

var venuesControllers = angular.module('myApp');

venuesControllers.controller('VenuesController', ['$scope', '$resource', '$location', '$routeParams',
function ($scope, $resource, $location, $routeParams) {

//This is a venue initialization it may be no needed. TODO: try not to use it.
$scope.venue = {city: "", sport: "", venueid: ""};

//Here I just declare the function

$scope.showVenueFields = function () {
    // To search by city and/or sport
    console.log($scope.venue.venueid);
    $scope.venue.name = 'El Andén';
    $scope.venue.fields = [
        {'name': 'Cancha 1', 'sport': 'Futbol', 'price': '$150',
            'hours' : [
                {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
            ]
        },
        {'name': 'Cancha 2', 'sport': 'Futbol', 'price': '$170',
            'hours' : [
                {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
            ]
        },
        {'name': 'Cancha 3', 'sport': 'Tenis', 'price': '$170',
            'hours' : [
                {'from': '10:00', 'to': '11:00', 'state': 'Libre'},
                {'from': '11:00', 'to': '12:00', 'state': 'Libre'},
                {'from': '12:00', 'to': '13:00', 'state': 'Libre'},
                {'from': '13:00', 'to': '14:00', 'state': 'Libre'}
            ]
        }
    ];
}


if ($routeParams.venueid){
    console.log("Leo los parametros");
    $scope.venue.venueid = $routeParams.venueid;
    //Here I really call the function and initialize the venue.fields
    $scope.showVenueFields();

} else {
    // Do something
}



// this ends the controller's declaration
}]);

Answer 1

you should change the way the Controller is called

instead of this:

$scope.searchFieldsState = function() {
  $scope.fields = [
    {'name': 'Cancha 1', 'sport': 'Futbol', 'price': '$150',
        'hours' : [
 etc...

type this:

function VenuesController($scope) {
  $scope.fields = [
    {'name': 'Cancha 1', 'sport': 'Futbol', 'price': '$150',
 ...