AngularJS Controller: How to Utilize Form Element References

I need assistance with implementing a feature in my HTML file. I have 2 buttons outside the form, and when either button is clicked, I want to show the form and set the value of the form element "role_id" to either 1 or 2 depending on which button was clicked. However, I am struggling to figure out how to write the code inside the controller to achieve this. Can anyone provide guidance? Index.html

<button class="btn btn-custom" ng-click="formToggle(1)" > Add Role 1</button>
<button class="btn btn-custom" ng-click="formToggle(2)"> Add Role 2</button>
<form class="form-horizontal" name="persForm" id="persForm" ng-submit="insertInfo(persInfo);" >
    <input type="hidden" name="role_id" id="role_id" class="form-control" ng-model="persInfo.role_id" value="" />
</ form>

Controller.js

var crudApp = angular.module('crudApp',[]);
crudApp.controller("DbController",['$scope','$http', function($scope,$http){
    $scope.formToggle = function(id){
        $('#persForm').slideToggle();
        //Code here to set form element ‘role_id’ to id
    }
}]);

I've attempted using getElementById and other JavaScript DOM methods, but they don't seem to work within AngularJS.

Answer №1

When working with AngularJS, the ng-model attribute is used to bind an object value within the $scope. In this specific scenario, it is binding to persInfo.role_id. To update this property upon clicking a button, all you have to do is set the value accordingly. By inspecting the element, you can observe that the value is being controlled through the ng-model connection.

var app = angular.module('app', []);
app.controller("Controller", ['$scope','$http', function($scope, $http){
    // Initialize scope objects
    $scope.persInfo = {};
    $scope.toggleForm = function(id){
        $('#persForm').slideToggle();
        //Code goes here to assign 'id' to form element ‘role_id’
        $scope.persInfo.role_id = id;
    }
}]);

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

methods for transferring information from a website to a smartphone using SMS

I am currently in the early stages of learning JavaScript and working on a project that involves creating a form (a web page) to send data to my mobile device via SMS when the submit button is clicked. However, I am unsure how to transfer data from JavaS ...

Exploring the capabilities of SVG and audio integration in web browsers

I am curious if it's possible to incorporate audio into an SVG file in a web browser. I came across this thread here, but unfortunately, I can't leave a comment =/ I tried implementing the code from this website, but it doesn't seem to work ...

"Unlocking the power of data with Kendo's

Having trouble with the data source for a Kendo chart. Here is the controller code: $scope.data = new kendo.data.DataSource({ transport: { read: _read }, sort: ({ field: 'date', dir: "asc" ...

Linking states using AngularJS and jQuery

Imagine I have a scenario with two different states: .state('page1', { url: '/page1', templateUrl: 'pages/templates/page1.html', controller: 'page1' }) .state('page2', { url: '/page2& ...

How to retrieve data from a nested object within a JSON array using JavaScript

When I use Logger.log(response.data.phone), the following data is displayed in my log: [{label=work, primary=true, value=5558675309}, {label=work, value=6108287680, primary=false}, {value=6105516373, label=work, primary=false}] My goal is to have the two ...

The module 'react/jsx-runtime' could not be located within the path relative to '@mui/styled-engine/StyledEngineProvider/StyledEngineProvider.js'

I encountered this issue when attempting to create a new React project using MUI. I followed this code example from the documentation, which functions correctly in their live Codesandbox but not on my local setup. Here is the complete error message: Module ...

Configuring route for serving static files in an Express server

I'm completely new to working with express, but I am eager to learn and follow the best practices. My goal is to serve files like CSS or index.html from a folder called 'public'. I have seen examples using .use and .get methods as shown belo ...

Is there a way to modify Vue component properties using plain JavaScript code?

I am currently working on a Vue 2 project developed using Vue CLI, and my goal is to package it as a library. I want to create a wrapper script that abstracts away dependencies and Vue syntax to enable easy interaction like the examples below: // Mounting ...

The efficiency of the react native Animated.spring function leaves much to be desired, as it

I am currently using the React Native animated API to create a seamless transition from left to right positions. This is how I set up my initial state: constructor(props) { super(props); this.state = { isDrawerOpened: false, ...

Is Restangular taking forever to resolve the promise?

Just starting out with JavaScript and AngularJS, and this particular issue has me stumped. Requirements A RESTful service that retrieves data from the backend AngularJS 1.2.21 and Restangular 1.4.0 being used An AngularJS controller tasked with requesti ...

How to effectively handle multiple rows with numerous jQuery functions?

Here is a link to see my code in action: Example of my code working You can also check out another example with an ID here: Example 2 of my code I gave it another shot over at this link: http://jsbin.com/wazeba/edit?js,console,output And finally, one mo ...

Implementing a feature in React.js to pass parameters to another component and display list details from an API upon button click

I am a beginner in reactJS and I have created a Listview that displays a list of posts. There is a button on the page that should take me to another component or page where I can view the comments for that post. How do I pass the postId to the other compon ...

Customizeable fallback routes in Angular's $routeProvider

For my initial angular project, I've decided to organize my code by splitting it into directories like this: app/ calendar/ calendar.js contacts/ contacts.js companies/ companies.js ... app.js Each di ...

Special VueJs rendering for JSON data retrieval from API

Here is the data I received from an API: { "data": { "City": { "zip": "75000", "appointment": { "2020-10-12": { "08:00:00": 3, "09:15:0 ...

The search functionality in the bootstrap-select component is failing when the data token includes only numerical values, such as "4730"

Utilizing to create search options for form selection. The search feature works for all strings except those containing numbers such as "4730". Data is loaded into the select tag from a JSON. Here's an example of the select tag: <div class="col- ...

Run a script on an ajax requested page prior to the page being loaded

My website navigation utilizes AJAX for seamless transitions between pages. Specifically, I have two pages: index.html and profile.html. The structure of both pages is as follows: <html> <head> <script src="script1.js" type="text/javascript ...

Receiving Output from an AJAX Request

My PHP script is set up to verify the validity of an email address, returning either true or false. I've been attempting to use AJAX to call this PHP file and pass the result back to a Javascript function, but unfortunately, I haven't been succes ...

Implement event listeners to transcluded content in AngularJS

How can I add event handlers to transclusion content in a directive without allowing consumers to add their own click handlers? I want the directive to handle it, but I'm unsure of the correct approach for adding handlers to the content passed with ng ...

Leveraging Async/await in conjunction with mongoose

Recently, I enrolled in an advanced NodeJS course taught by Stephen Grinder where we were experimenting with caching in Redis. Upon running my application and reaching a specific route, I encountered the following error: DeprecationWarning: Mongoose: m ...

Tips for properly invoking a function from one component to another component

After browsing through a few questions on the topic of parent/child elements, I have come across a particular node tree that looks like this: IndexPage -> Modals -> ClientDetails (it's modal component) -> Header My goal is to ...