Почему этот пример AngularJS ng-repeat не работает?

Question

Извините за вопрос. Но я искал везде, и я не могу понять, почему этот пример не работает:

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'} 
      ] 
     } 
    ]; 
}; 

Я уверен, что функция searchFieldsState является время потому что я использовал команду console.log для целей отладки.

Итак, может ли кто-нибудь увидеть ошибку здесь? Свежий глаз был бы полезен.

спасибо, что заранее.

UPDATE:

Я инициализируется в $ scope.fields вне функции и нг-повтор работал. Но это не то, что мне нужно так ... проблема сохраняется

Я добавлю свой NavBar код, потому что я думаю, что это связано с этим вопросом:

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

Маршрут:

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' 
    }); 

}]);

Спасибо, ребята!

---

Обновление с рабочим кодом:

HTML-файл с нг-повторе было нормально.

мне пришлось изменить navbar.html шаблон

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

Итак, я изменил маршрут

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

с этим я получаю параметр называется venueid. А потом ...

магический трюк основан в Карлосом Барселоне предложения:

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

вы должны изменить способ контроллер называется

вместо этого:

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

типа это:

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