文章/答案/技术大牛

发布

社区首页 >问答首页 >角模板神秘地只显示某些{{表达式}

问角模板神秘地只显示某些{{表达式}
EN

Stack Overflow用户

提问于 2014-11-08 20:44:50

回答 1查看 85关注 0票数 2

我使用的是角JS v.1.2.26，我花了几个小时试图找出为什么我不能让某些表达式出现在视图中。

下面是一个完整的、最小的示例(或jsfiddle 这里)：

<!DOCTYPE html>
  <html lang="en">
  <head>
    <meta charset="utf-8">

    <script type="text/javascript">
      var screen_id = '430732';
    </script>

    <script type="text/javascript" src="/public/scripts/vendor/angular.min.js"></script>

    <script>
      var tsApp = angular.module('tsApp',[]);

      var screenCtrl = tsApp.controller('screenCtrl', function($scope) {

        $scope.columns = [null,[null,{"name":"","id":"583","column":1,"order":1,"display_class":"static-text","block_agency":"static-text","block_mode":"static-text","custom_param":"","custom_body":"<b>This demo screen is brought to you by TransitScreen.com</b>"},{"name":"U St NW+ 17th St NW","id":"591","column":1,"order":2,"display_class":"masstransit","block_agency":"metrobus","block_mode":"bus","stops":[{"agency":"metrobus","mode":"bus","name":"U St NW+ 17th St NW","vehicles":[{"agency":"metrobus","mode":"bus","name":"U St Nw + 17th St Nw","full_route":"96","short_route":"96","destination":"Capitol Heights Station","predictions":[9,42],"direction":"Eastbound","vehicle_number":0,"logo":"","display_route":"96","longname":"96","route_class":"bus_metrobus","destination_class":"bus_metrobus","longname_accessible":null,"prediction1":9,"prediction2":42,"units":"MINUTES"},{"agency":"metrobus","mode":"bus","name":"U St Nw + 17th St Nw","full_route":"90","short_route":"90","destination":"Anacostia Station","predictions":[10,39],"direction":"Southbound","vehicle_number":1,"logo":"","display_route":"90","longname":"90","route_class":"bus_metrobus","destination_class":"bus_metrobus","longname_accessible":null,"prediction1":10,"prediction2":39,"units":"MINUTES"}],"walk_directions":"","walk_minutes":null,"arrow_svg":null}]}]];

      });//end screenCtrl
      screenCtrl.$inject = ['$scope'];

    </script>

  </head>
  <body class="screen-body total-cols-1" ng-app="tsApp">

    <div class="page-holder" ng-controller="screenCtrl">
      <div class="col" id="col-1">
        <div ng-repeat="block in columns[1]">
          <div ng-include="'/public/scripts/block.html'"></div>
        </div>
      </div>
    </div>

  </body>
</html>

以下是block.html的内容

<div ng-switch on="block.display_class">

  <div ng-switch-when="masstransit">

    <table>

      <div ng-repeat="stop in block.stops">

          <div ng-repeat="vehicle in stop.vehicles">

              <h2>Test 1</h2>
             {{ stop.mode }} 
             {{ block.display_class }} 
             {{ vehicle.vehicle_number }}

            <tr class="" id="">
              <td class="">

                <h2>Test 2</h2>

                 {{ stop.mode }} 
                 {{ block.display_class }} 
                 {{ vehicle.vehicle_number }}

              </td>

            </tr>

          </div><!-- ng-repeat -->         

      </div><!-- ng-repeat -->

    </table>

  </div> 

</div><!-- end ng-switch -->

输出这个..。

测试1两次显示预期值(因为循环中有两个项)。然后，在测试2中，只有一个迭代，只有中间值出现。

javascript

angularjs

angularjs-ng-repeat

回答 1

Stack Overflow用户

回答已采纳

发布于 2014-11-08 22:32:45

在上面的代码中没有发现这个问题。在TR或TD中，ng-重复没有什么问题。更有可能的是，控制器或代码中的其他地方有问题。

我创建了一个小提琴，它展示了一个示例，在您的问题中尽可能接近数据结构显示数据，我可以猜到。效果很好。

<table ng-controller="myCtrl" border=1>
 <tr ng-repeat="stop in block.stops">
  <td ng-repeat="vehicle in stop.vehicles">
      <dl>
          <dt>Mode:</dt><dd>{{ stop.mode }}</dd>
          <dt>Class:</dt><dd>{{ block.display_class }}</dd>
          <dt>Number:</dt><dd>{{ vehicle.vehicle_number }}</dd>
      </dl>
    </td>
</tr>
</table>

编辑我把你的小提琴修好了。见编辑2在这里您不能期望角正确地工作在格式错误的HTML上。你不能像那样把TRs包在DIVs里。即使棱角可以工作，谁知道某些浏览器会如何对待它。您可能会在表后弹出数据。表呈现是HTML中相当严格的部分之一。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/26821890

复制

相似问题

问角模板神秘地只显示某些{{表达式}
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角模板神秘地只显示某些{{表达式}EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角模板神秘地只显示某些{{表达式}
EN