Rails 中的 AngularJS 过滤器 [英] AngularJS Filter in rails

查看:28
本文介绍了Rails 中的 AngularJS 过滤器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在我制作的 ruby​​ on rails 应用程序上制作可搜索的帖子列表.我有 AngularJS 正在处理该应用程序.所有帖子都保存在@posts 中的 rails 中.我如何让 AngularJS 过滤掉它?以下是相关视图:

帖子

<div ng-app><div ng-controller = "PostCtrl"><input placeholder = "Search Post Titles", ng-model="searchText"><div ng-repeat="post in posts | filter:searchText"><h2>{{post.title}}</h2><p>{{post.text}}</p>

我不知道如何用@posts 中的对象填充角度数组帖子.

解决方案

继续Davin Tryon的回答,你可以这样试试.首先在你的控制器中使用 ng-init="init()":

然后在您的控制器中您可以执行以下操作:

$scope.init = (posts) ->$scope.posts = angular.fromJson(posts)

然后帖子将是一个 JavaScript 对象,可以在您的范围内访问它,就像您使用 angular 资源查询它一样.

如果你想包括帖子的关联(比如评论),你可以检查 rails 文档 用于 to_json(或as_json")和 :include 选项

I'm trying to make a searchable list of posts on a ruby on rails application that I made. I have AngularJS working on the application. All of the posts are saved on rails in @posts. How would I make AngularJS filter over that? Here is the relevant view:

<h1>Posts</h1>
<div ng-app>
    <div ng-controller = "PostCtrl">
      <input placeholder = "Search Post Titles", ng-model="searchText">
        <div ng-repeat="post in posts | filter:searchText">
          <h2>{{post.title}}</h2>
          <p>{{post.text}}</p>
        </div>
    </div>
</div>

I'm not sure how to fill the angular array posts with the objects in @posts.

解决方案

Continuing the answer of Davin Tryon, you can try as this. First use ng-init="init()" in your Controller:

<div ng-controller = "PostCtrl" ng-init="init( <%= @posts.to_json %> )">

Then in your controller you can do:

$scope.init = (posts) ->
    $scope.posts = angular.fromJson(posts)

Then posts will be a JavaScript Object which can be accessed in your scope as if you have query it using angular resource.

If you want to include the associations of posts (lets say comments i.e) you can check rails docs for to_json (or "as_json") and the :include option

这篇关于Rails 中的 AngularJS 过滤器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆