使用ng-repeat

时间:2015-11-26 10:28:30

标签: ruby-on-rails ruby angularjs relationships

我试图用ng-repeat显示一个相关表的列,但我不能。

我有3张桌子:

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}}这样的标签时,它没有显示任何内容。 在轨道中工作类似的sintaxis,但我看到角度必须以不同的方式完成。我昨天和今天都在搜索有关它的信息,但我没有找到任何信息。有人可以帮忙吗?谢谢!

这是我的控制器的数据:

  # 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并且我看到这个事件的al标签,所以在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
  }
]

如果我使用调试器,显然我只能看到带有ng-repat的json中的字段。但是我需要列出另一张表格中的项目,就像我在rails中一样。

我正在使用:

  • Rails 4.2.5
  • Ruby 2.2.1p85(2015-02-26修订版49769)

请耐心等待我,我会学习角度

2 个答案:

答案 0 :(得分:1)

尝试更改控制器代码:

Pythonw

使用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 的参考信息

<强>更新

创建文件 =&gt;的 angularjs

app/views/events/index.json.jbuilder

答案 1 :(得分:0)

要在UI中绑定某个变量,您需要先将其绑定到$scope。因此,请尝试使用$scope.store代替var store。

  

在依赖项中注入$scope