"Step-by-step guide on setting up Angularjs ng-model in a Rails environment

Question regarding the utilization of two-way binding in AngularJS and Rails ERB files.

Let's say the input value in my .erb file has an initial value like this:

example.erb

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

As evident in the above example, the input is also connected to an AngularJS model. example.js

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

I noticed that the original @item.title gets replaced by the AngularJS model value. But I want the opposite to happen, where the AngularJS model is initialized with the value from the .erb file. How can I achieve that?

I attempted to include example.js in the asset pipeline. i.e. example.js.erb

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

However, the @item always seems to be nil in the pipeline. Is it possible that @item is only accessible in views?

Answer №1

To achieve this, you may employ ng-init:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating a Chrome extension with Angular 5: A comprehensive guide

Currently, I am in the process of developing a Chrome extension using Angular 5. Initially, I successfully created a basic Angular app with the help of Angular Material and it functioned perfectly as an Angular application (I used ng build for verification ...

Preventing users from selecting past dates in HTML input date field

I need help with disabling past dates in an HTML date input field. Even though I am able to restrict selecting past dates on the date picker, I can still save data if I manually type in a previous date (e.g., 12/08/2020). $(document).ready(function() { ...

Challenges encountered during the execution of React tests: Enzyme, Jest, and React integration

Encountered an error while running tests: FAIL src/components/common/user/UserMenu/__tests__/UserMenu.test.js ● Runtime Error Error: Failed to get mock metadata: /redacted-directory/node_modules/core-js/library/modules/_global.js See: http://facebook ...

Creating a tree structure from an array in JavaScript, including the parent id enclosed in brackets

Before dismissing this question as a duplicate, please listen to me. I am working with a json response in reactjs that looks like the following organisationUnits: [ { name: "0.Mzondo", id: "nW4j6JDVFGn", parent: { ...

Encountering an endless loop when utilizing cycle-idb with a text field for user input

Struggling to develop a basic test app that captures user input from a text field, displays it, and stores it using cycle-idb. Unfortunately, I've been stuck in an endless loop no matter what steps I take. Below is the complete main function: functi ...

What is a creative way to get rid of old content on a webpage using jQuery without relying on the

As I work on my crossword project, I have almost completed it, but encountering a problem. Within my HTML code, I have a select list that loads a .JSON file using Javascript. <form method="post" id="formulaire"> <div class="toto"> <sel ...

Can a new class be created by inheriting from an existing class while also adding a decorator to each field within the class?

In the following code snippet, I am showcasing a class that needs validation. My goal is to create a new class where each field has the @IsOptional() decorator applied. export class CreateCompanyDto { @Length(2, 150) name: string; @IsOptional( ...

The error message "ng: command not found" popped up despite successfully installing the latest @angular/cli using npm linking

Here is the information about my current setup: Node version: v10.15.3 NPM version: 6.4.1 I attempted to run the following command: Command: npm i -g angular/cli An error occurred while executing: npm ERR! /usr/local/bin/git ls-remote -h -t ssh:// ...

Leverage access tokens in React.js frontend application

After successfully creating an authentication API using Nodejs, Expressjs, MongoDB, and JWT, I am now working on a small frontend application with React-js specifically for Sign-up and Sign-in functionalities. While I have managed to integrate the Sign-up ...

Ways to receive JavaScript console error messages to aid in debugging your code

Currently, I am developing a Web Application and facing an issue with capturing console errors. Specifically, I need to capture errors related to network connectivity issues, such as when the network is down or slow causing responses from the server to be ...

Encountering unidentified data leading to the error message "Query data must be defined"

Currently, I'm utilizing Next.js to develop a project for my portfolio. In order to manage the API, I decided to implement both Tanstack query and Axios. The issue arises when attempting to retrieve the data as an error surfaces. Oddly enough, while ...

Transform the dynamic JSON format into a key-value pair structure with nested children nodes

Looking to convert a dynamic JSON structure into a tree node: { "video": { "width": 1920, "height": 1080, "video_codec": "H264", "CBR": "4337025", "frame_rate& ...

ajax memory leakage

Encountering a gradual memory leak issue in Internet Explorer and Firefox while utilizing a mix of ASP.NET AJAX and jQuery. The situation mirrors the one portrayed on this post: Preventing AJAX memory leaks, but with jQuery and ASP.NET AJAX instead of prot ...

Tips for selecting multiple rows in Kendogrid without using the select checkbox feature in Angular 5

I'm currently utilizing Kendo UI for Angular 5. Can anyone guide me on selecting multiple rows in a KendoGrid without needing to use the Ctrl key or checkboxes in Angular 5? I know how to select multiple rows using the Ctrl key or checkboxes according ...

The functionality of two-way binding in a distinct controller is not functioning properly when integrated with angular-wizard

I've been working hard to integrate this amazing wizard controller into my project: However, I've hit a roadblock with two-way binding not functioning as expected outside of the <section> attribute: http://plnkr.co/edit/N2lFrBRmRqPkHhUBfn ...

What is the best way to include several IDs in a discord.js verification process?

I am attempting to create a basic script that verifies if the user's ID matches the one specified in the code. However, I'm struggling to understand how to achieve this. Any assistance from you all would be greatly appreciated. if(message.autho ...

Utilizing Vuex to Access a Component's Property in Vue

Utilizing Vuex in my app is integral for executing asynchronous tasks, such as logging a user into the application. Upon successful login and execution of axios.then(), I aim to notify the component from which I invoked this.$store.dispatch('login&apo ...

Can someone explain the significance of this in an HTML form?

Can anyone explain the following code snippet found in a web form? I found this button code on a webpage, but I'm having trouble understanding it. Could someone provide some clarity? <input type="submit" name="ctl00$ContentPlaceHolder1$Button8" v ...

Guide to sending a post request in Node.js using Mongoose

I recently tried to follow a tutorial (https://medium.com/weekly-webtips/building-restful-apis-with-node-js-and-express-a9f648219f5b) from 2 years ago to build an API. However, I'm struggling to update the code to work with more recent changes in the ...

I am attempting to display text in the input box on the console, but unfortunately, I am not seeing any changes in the console when typing

I have this code, but I am not getting any output when I run it: import { restaurantList } from "../config"; import { RestrauntCard } from "./Restraunt"; const Body = () => { const searchText = "KFC"; return ( <& ...