how to initialize Angularjs ng-model in rails

Question

A question about using angularjs two way binding and in rails erb files.

Suppose value of input in my .erb file has an original value i.e.

example.erb

<input type="text" value=" <%= @item.title %> " ng-model ="item.title">

As you may notice in above example, the input is also binded with a angularJs model. example.js

mayApp.controller('newItemController', function itemController($scope) { 
   $scope.item = {title:"angularJs model value", price: 1000}
}

I found that the original @item.title is overridden by the angularJs model value. However, I want things happen in the opposite way, that is, the angular js model is initialised by value from .erb file. How can I do that?

I have tried to put example.js into asset pipeline. i.e. example.js.erb

mayApp.controller('newItemController', function itemController($scope) { 
   $scope.item = {title:"<%= @item.title %>", price: 1000}
}

but the @item is alway nil in the pipeline. I suppose the @item is only available in views?

AngularJS knows nothing and cares not about your rails model. Also, rails assets are not in scope of your rails model/controller so no wonder @item.title is undefined in example.js.erb. — Stewie
– Stewie, Commented Nov 30, 2013 at 15:53
@Stewie I agree with you. I know why this happened. Do you have any suggestions about how to initialise Angular model with value of rails models. — GingerJim
– GingerJim, Commented Nov 30, 2013 at 15:58
As a quick solution you might try to embed your example.js <script> into example.erb view partial. That way <%= @item.title %> will/should be interpolated with your item model while generating the html. — Stewie
– Stewie, Commented Nov 30, 2013 at 16:07

Davin Tryon · Accepted Answer · 2013-11-30 16:35:02Z

7

You can use ng-init for this:

<input type="text" ng-init="item.title = '<%= @item.title %>'" ng-model ="item.title">

edited Nov 30, 2013 at 16:35

answered Nov 30, 2013 at 16:12

Davin Tryon

67.4k15 gold badges149 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Davin Tryon Over a year ago

ok, updated. maybe ng-value will only work with other input types.

Collectives™ on Stack Overflow

how to initialize Angularjs ng-model in rails

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related