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命令进行调试。

那么，有人可以在这看到任何错误吗？一个新鲜的眼睛会有所帮助。

非常感谢你。

更新：

我初始化了函数外的$ scope.fields，并且ng-repeat工作了。但这不是我所需要的......问题仍然存在

我将添加我的导航栏代码，因为我认为它与此问题有关：

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

}]）;

谢谢你们！

使用工作代码进行更新：

带有ng-repeat的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

你应该改变调用Controller的方式

而不是：

$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',
 ...

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

1 个答案: