使用 ng-repeat 显示相关表的元素

Question

我正在尝试使用 ng-repeat 显示相关 table 的列，但我不能。

我有 3 个 table：

create_table "events", force: :cascade do |t|
t.string   "title"
t.text     "description"
t.time     "hour"
t.integer  "duration"
t.date     "date"
t.integer  "user_id"
t.datetime "created_at",       null: false
t.datetime "updated_at",       null: false
t.float    "latitude"
t.float    "longitude"
t.string   "formatted_addres"
t.integer  "location_id"
end

create_table "taggings", force: :cascade do |t|
t.integer  "event_id"
t.integer  "tag_id"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end

add_index "taggings", ["event_id"], name: "index_taggings_on_event_id"
add_index "taggings", ["tag_id"], name: "index_taggings_on_tag_id"

create_table "tags", force: :cascade do |t|
t.string   "name"
t.datetime "created_at", null: false
t.datetime "updated_at", null: false
end

add_index "tags", ["name"], name: "index_tags_on_name"

我正在使用 ng-repeat 来显示事件

    controller code:    
    app.controller('eventController', ['$http', function($http){
                var store = this;
                store.events = [];

                $http.get('/events.json').success(function(data){
                    store.events = data;
            });
    }]);

    The html code:
    <section ng-repeat="event in eventShow.events | orderBy:'date'">
            <div class="panel panel-default single-event">
                <div class="panel-heading">
                    <h3>
                        {{event.title}}
                        <em class="pull-right">Created by user: {{event.user_id}}</em>
                    </h3>
                </div>
                <div class="panel-body">
                    Description:<br>{{event.description}} <br>
                    <em class="pull-right">{{event.date | date:'dd-MM-yyyy' }} - {{event.hour | date:"H:mm"}}</em> <br>
                    {{event.duration}} minutes <br>
            {{ event.tags }}
                </div>
            </div>
        </section>

一切正常，但当我尝试在 ng-repeat 上显示标签时，如 {{ event.tags.name }} 它没有显示任何内容。在 rails 中有类似的 sintaxis，但我在 angular 中看到它必须以不同的方式完成。我昨天和今天都在搜索有关它的信息，但没有找到任何信息。有人可以帮忙吗？谢谢！

这是我的控制器的数据：

  # GET /events
  # GET /events.json
  def index
    @events = Event.all
    binding.pry
    respond_to do |format|
      format.html { render :index }
      format.json { render json: @events }
    end
  end

如果我做 binding.pry 我可以做 @events.first.tags 并且我看到了这个事件的所有标签，所以在 ruby 代码中我可以做

<ul>    
    <% @events.each do |event| %>
       <li><%= event.tags %></li>
    <% end %>
</ul>

这就是我无法使用 angular {{ event.tags }} 我从 get /events.json 得到的 json 响应是这样的

    [
  {
    "id": 18,
    "title": "awesome event",
    "description": "incredible description",
    "hour": "2000-01-01T11:12:00.000Z",
    "duration": 12,
    "date": "2015-11-25",
    "user_id": 1,
    "created_at": "2015-11-26T11:57:03.433Z",
    "updated_at": "2015-11-26T11:57:03.433Z",
    "latitude": 42.5767239,
    "longitude": 3.4435419,
    "formatted_addres": "somewhere",
    "location_id": null
  }
]

如果我使用调试器，显然我只能看到 json 中带有 ng-repat 的字段。但是我需要像在 rails.

中那样列出另一个 table 列中的项目

我正在使用：

Rails 4.2.5
Ruby 2.2.1p85（2015-02-26 修订版 49769）

请耐心等待我还在学习中angular

Answer 1

为了在 UI 中绑定一些变量，您需要先将其绑定到 $scope。所以尝试使用 $scope.store 而不是 var store.

Inject $scope in dependencies.

Answer 2

尝试更改控制器代码：

app.controller('eventController', ['$scope', '$http', function($scope, $http){

            $http.get('/events.json').success(function(data){
                $scope.events = data;
        });
}]);

将您的 html 更改为 events 范围

<section ng-repeat="event in events | orderBy:'date'">

供您参考 $scope 在 angularjs

更新：

创建文件 => app/views/events/index.json.jbuilder

json.array! @events do |event|
  json.(event, :id, :title, :description, :hour, :duration, :date, :user_id, :latitude, :longitude, :formatted_addres, :location_id)
  json.tags event.tags
end

# change in controller:

 def index
    @events = Event.all
    binding.pry
    respond_to do |format|
      format.html 
      format.json 
    end
  end

使用 ng-repeat 显示相关表的元素

show elements of related tables with ng-repeat

ruby

ruby-on-rails

relationships

angularjs