爲什麼這個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外的函數和NG-重複工作。但是，這不是我所需要這麼...問題依然存在

我將添加我的導航欄的代碼，因爲我認爲它是與此相關的問題：

<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文件與NG-重複是好的。

我不得不修改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', 
...