Question

我在我的网站上创建了一个小的Angular模块（在poge加载时）从数据库调用一个俱乐部列表，并应通过视图显示它们。我遇到了问题，而控制器没有自行更新。控制器变量显示正确的数据，但不更新视图。这是我的代码：

查看文件：

<div ng-app="clubFilter" ng-cloak class="col-lg-12" ng-controller="clubController"> 
{{clubObj.clubs}}
<div class="col-lg-3" id="clubs-filter-left">
    <form ng-submit="filterClubs()">
        <input type="text" name="location" ng-model="searchTerm" placeholder="Search..." />
        <input type="submit" name="submit" value="Submit" />
    </form>
    <div id="searchInfo" ng-show="(searchTerm != '') || (activityText != '')">
        <span ng-show="searchTerm != ''"><strong>Location:</strong> {{searchTerm}}</span>
        <span ng-show="activityText != ''"><strong>Activity:</strong> {{activityText}}</span>
        <span class=''>(Distance indicated in miles)</span>
    </div>
    <div id="activityInfo" ng-show="activityText != ''">
        <p>Your nearest Leisure Centres with {{activityText}} facilties</p>
    </div>
</div>
<div class="col-lg-9" >     
    <ul class="leisure-centres">            
        <li ng-repeat="club in clubs" ng-show="club.show">              
            <div class="centre">
                <a class="link" ng-href="http://isca01.bigwavemedia.info{{club.link}}">More info</a>
                <a class="link" ng-show="club.distance > 0" ng-href="{club.link}" ng-cloak>{{club.distance}}m</a>           
                <div class="image" ng-show="club.image > 0">
                    <img src="{{image}}" alt="{{club.title}}" />                        
                </div>
                <div class="details">
                    <div class="title">
                        <h3>{{club.title}}</h3>
                    </div>
                    <div class="address">
                        {{club.building}},
                        {{club.street}},
                        {{club.city}},
                        {{club.county}},
                        {{club.postcode}}                           
                    </div>
                    <div class="tel">
                        <strong>Tel: </strong>
                        <a href="tel:{{club.telephone}}" ng-bind="club.telephone"></a>
                    </div>
                    <div class="email">
                        <strong>Email: </strong>
                        <a href="mailto:{{club.email}}" ng-bind="club.email"></a>
                    </div>
                </div>
            </div>
        </li>           
    </ul>
</div>

控制器：

angular.module('clubFilter.controllers', []).
controller('clubController', function($scope, $http, googleMapService, clubService) {

    if(searchTerm == "" && activity == "") {        
        clubService.getClubs().then(function(clubs) {
            $scope.clubs = clubs;
            console.log($scope.clubs);
        });     
    } else if (searchTerm != "" && activity == "") {

    } else if (searchTerm == "" && activity == "") {

    } else if (searchTerm != "" && activity != "") {

    }

以下是console.log的结果（您可以看到有结果且它们是正确的）

Object { id="1", a_id="["2","6","11","13","14",...8","69","76","84","97"]", title="Ashington Leisure Centre", more...}, Object { id="2", a_id="null", title="Beach Huts", more...}, Object { id="3", a_id="["2","6","11","13","14",...","70","76","84","105"]", title="Blyth Sports Centre",

有谁可以看到为什么$ scope.clubs变量没有在我的视图中将其自身绑定到ng-repeat？感谢

Answer 1

我在你的俱乐部对象的任何地方都没有看到show ...因此ng-show="club.show"将是假的，并阻止视图在ng-repeat中显示你的俱乐部。

而不是：

<li ng-repeat="club in clubs" ng-show="club.show">

试试这个：

<li ng-repeat="club in clubs">

角度控制器没有更新我的视图

1 个答案: