show elements of related tables with ng-repeat - ruby-on-rails

Question

I am trying to show a column of a related table with ng-repeat, but I can't.
I have 3 tables:
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"
and I am using ng-repeat to show the events
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>
Everything works, but when I try tho show the tags on the ng-repeat like {{ event.tags.name }} it doesn't show anything.
In rails works a similar sintaxis, but I see in angular it must be done in a different way. I was searching information about it yesterday and today and I did not find anything. Anybody can help? Thanks!
This is the data of my controller:
# 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
If I do a binding.pry I can do #events.first.tags and I see al tags of this event, so in ruby code I can do
<ul>
<% #events.each do |event| %>
<li><%= event.tags %></li>
<% end %>
</ul>
And this is what I can't do with angular {{ event.tags }} the json response that I get from get /events.json is like this
[
{
"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
}
]
and if I use the debugger, obviously I only see the fields that are in the json with the ng-repat. But I need to list the items in the column of another table ralated like I do in rails.
I'm using:
Rails 4.2.5
Ruby 2.2.1p85 (2015-02-26 revision 49769)
please be patient with me I'm sill learning angular

Answer 1

Try by change controller code:
app.controller('eventController', ['$scope', '$http', function($scope, $http){
$http.get('/events.json').success(function(data){
$scope.events = data;
});
}]);
Change your html with events scope
<section ng-repeat="event in events | orderBy:'date'">
for your reference about $scope in angularjs
Update:
create file => 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

Answer 2

In order to bind some variable in UI you need to bind it to $scope first. So try using $scope.store instead var store.
Inject $scope in dependencies.