1

我正在尝试使用 ngResource 在 angularjs 中重新创建以下 erb 模板，但似乎无法弄清楚如何访问 event.spikes（这是一个 has_many 关系）。

我要更改的erb文件：

<div class='event-list'>
  <ul>
    <% @events.each do |event| %>
    <li><%= event.name %> || <small><%= event.date %></small>
      <ul>
        <% event.spikes.each do |spike| %>
        <li>Time of Spike: <%= spike.date_time %> || Spike Velocity: <%= spike.peak_velocity %></li>
        <% end %>
      </ul>     
    </li>
    <% end %>
  </ul>
</div>

没有erb的半成品.html：

<div class='event-list' ng-controller='EventsCtrl'>
  <ul>
    <li ng-repeat='event in events'>
      {{ event.name }} || <small>{{ event.date }}</small>
      <ul>
        <<<<<SOMETHING GOES HERE???>>>>>>>>
      </ul>     
    </li>
  </ul>
</div>

这是我的服务，app/assets/javascripts/angular/controllers/event.js：

App.factory('Event', ['$resource', function($resource) {
  return $resource('/events/:id', { id: '@id' });
}]);

我的角度控制器，app/assets/javascripts/angular/controllers/events.ctrl.js：

App.controller('EventsCtrl', ['$scope', 'Event', function($scope, Event) {
  $scope.events = Event.query();
}]);

在我的角度应用程序定义的地方，app/assets/javascripts/app.js：

window.App = angular.module('sportsSpike', ['ngResource']);
4

2 回答 2

0

你可以像这样嵌套在Angular中

<li ng-repeat='event in events'>
      {{ event.name }} || <small>{{ event.date }}</small>
      <ul>
        <li ng-repeat='spike in event.spikes'>
          {{ spike.some_output_value }}  
        </li>
      </ul>     
</li>

但是，您需要确保将数据传递给 angular 的方式已经解决spike了events.

希望这可以帮助

于 2013-09-07T07:07:14.823 回答
0

按照muttonlamb here的回答，它是一个完整的 HTML 文件。如前所述，您可以轻松地ng-repeat使用 AngularJS 进行嵌套，并且将创建新的子隔离范围。

您可以在下面查看完整代码或在此处查看完整代码（http://plnkr.co/edit/jRG4xcRIab8sgHJFffWV）

PS：为了简单起见，我没有使用任何 ngResource，因为我通过数组获取数据，但ng-repeat代码可以以任何一种方式工作。

<!doctype html>
<html lang="en" ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Events</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>

 <script>

 'use strict';

 var myApp = angular.module('myApp',[]);


 myApp.events = [

       {
          name: 'Event 1',
          date: '01/02/2013',
          spikes: [
              {
                date_time : '1288323623006',
                peak_velocity: '10m/s'
              },

              {
                date_time : '1288323623004',
                peak_velocity: '20m/s'
              },
              {
                date_time : '1288323623003',
                peak_velocity: '10m/s'
              },

              {
                date_time : '1288323623001',
                peak_velocity: '20m/s'
              }
      ]
    },
    {
      name: 'Event 2',
      date: '05/03/2013',
      spikes: [
              {
                date_time : '1288323623003',
                peak_velocity: '40m/s'
              },

              {
                date_time : '1288323623002',
                peak_velocity: '50m/s'
              },
              {
                date_time : '1288323623007',
                peak_velocity: '80m/s'
              },

              {
                date_time : '1288323623001',
                peak_velocity: '60m/s'
              }
      ]
    },
    {
      name: 'Event 2',
      date: '05/03/2013',
      spikes: [
              {
                date_time : '1288323623005',
                peak_velocity: '40m/s'
              },

              {
                date_time : '1288323623009',
                peak_velocity: '50m/s'
              },
              {
                date_time : '1288323623003',
                peak_velocity: '80m/s'
              },

              {
                date_time : '1288323623002',
                peak_velocity: '60m/s'
              }
      ]
    }


  ];


  myApp.controller('EventsCtrl', ['$scope', 'Event', function($scope, Event) {

    $scope.events = Event.query();

  }]);

  myApp.factory('Event', function() {

    return {

        query: function() {
          return myApp.events;
        }

    } 

  });


  </script>

</head>
<body>

  <div class='event-list' ng-controller='EventsCtrl'>
    <ul>
      <li ng-repeat='event in events'>
    <h3>{{ event.name }} || {{ event.date }}</h3>
    <ul>
      <li ng-repeat='spike in event.spikes'>
        Time of Spike: {{ spike.date_time | date : 'short' }}  || Spike Velocity: {{ spike.peak_velocity }} 
      </li>
    </ul>     
      </li>
    </ul>
  </div>


</body>
</html>
于 2013-09-07T07:39:51.203 回答