current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
stack overflow careers
Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:
up vote 12 down vote favorite
3

Using angular.js often items like ng-click or ng-model are written directly in the html form element like so....

<input type="text" ng-model="name">

How would I do that with rails? As rails uses embedded ruby and generates the html....

<%= form_for(@user) do |f| %>
<%= f.label :name %>
<%= f.text_field :name %>

How would I add the ng-model to <%= f.text_field :name %> ?

share|improve this question

6 Answers 6

up vote 26 down vote accepted

Ideally, you don't want to be mixing embedded ruby interpolation and Angular's interpolation. It's better to have ruby asynchronously serve JSON to Angular, and let Angular take care of filling in the data on the client side.

share|improve this answer
    
Yeah after thinking about this, I think that makes sense code wise. – HelloWorld Jun 21 '12 at 21:24
1  
can you expand on this a little? i have a complex form with 2 levels of subforms that i'm converting to Angularjs. The subforms are contained in rails partials. The only way I can see doing this in AngularJs is to move all of my partials out of the /views/model directory and remake them as plain html files (using ngRoute to access) in the javascript directory--is this the best way to do it? Then I would lose all functionality of the form as a fallback if Angular doesn't work. Also will need to handcode in lots of form elements...maybe i'm looking at it wrong? – FireDragon Apr 25 '14 at 13:02
up vote 0 down vote

I think you can use the :html option to set any element attributes. Haven't tried it with angular.js special attributes though ;-)

f.text_field :name, :html => { :ng-model => "name" }

share|improve this answer
    
cool will give that a try – HelloWorld Jun 19 '12 at 19:45
    
did not work :( – HelloWorld Jun 19 '12 at 21:05
    
pass the html options hash with the value portion, not the html key, i.e f.text_field :name, :ng-model => "name" – zetetic Jun 19 '12 at 23:15
    
Also, the docs are your friend: apidock.com/rails/v3.2.1/ActionView/Helpers/FormHelper/… – zetetic Jun 19 '12 at 23:17
1  
This makes no sense to me. When you're calling a helper, it's supposed to render a string back to your html template, given some source parameters. The goal of Angular is to update the bindings each time they change and it won't, obviously, call the rails helper magically again. If you want Angular behavior you have to stick to plain html. – yagooar Jan 6 '13 at 21:48
up vote 7 down vote

Try this, when it's a hyphen separated word, you need to put within a hash notation.

f.text_field :name, :ng => {:model => "name"}
share|improve this answer
3  
you can also use a string key: "ng-model" => "name" – Mikey Feb 8 '13 at 16:39
3  
or ng_model: "name" – gertas Apr 11 '14 at 13:30
    
@MurifoX It works for new form, and how about edit existing form? It doesn't fill in the existing value correctly? – Samnang Jul 9 '14 at 17:26
    
You need to put the :value attribute and set it to your model attribute @model.attribute. – MurifoX Jul 9 '14 at 17:34
up vote 2 down vote

I was working with AngularJS directives and Rails 4 in order to make the bootstrap-datepicker jquery plugin work on a Rails 4 erb template, the code that I used inside the text_field_tag is the following:

<%= text_field_tag(:start_day, nil, class: 'form-control', datepicker: 'datepicker') %>

It's important to notice that this works with AngularJS directives, the code that you get on the DOM is as follows: 

<input class="form-control" datepicker="datepicker" type="text">

I worked with the directive in the following way: 

timeAdminCal.directive('datepicker', function(){
      return {
        restrict: 'A',
        link: function ($scope, $element) {
          $element.datepicker({
            format: 'd/m/yyyy',
            autoclose: true,
            todayHighlight: true
          });
        }
      }
    });

Notice that, according to AngularJS directive docs you can restrict a class name, so you may use any class name on your text_field_tag and it will work too.

timeAdminCal.directive('datepicker', function(){
      return {
        restrict: 'C', // Bind DOM element by class name 'datepicker'
        link: function ($scope, $element) {
          $element.datepicker({
            format: 'd/m/yyyy',
            autoclose: true,
            todayHighlight: true
          });
        }
      }
    });
share|improve this answer
up vote 2 down vote

The following is what worked for me (But it will disable error message("Please enter name.") of angularjs, i.e. required: "required"):

<%= f.input :id, as: :select, label: false, prompt: 'Select a selection',  input_html: { "ng-model" => ""} %>
share|improve this answer
up vote 0 down vote

On my current project, I had to start transforming static templates into angular pages, what I did was to render jbuilder views inside the template and put it in ng-init.

If the screen ever becomes part of a single page app, I will simply have to remove that render and add a query to the api to load that data. That's how Twitter does it, and it's simple and effective.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.