Capturing the value of an input field within a controller in AngularJS

Question

Capturing the value of an input field within a controller in AngularJS

I have been programming with JSP and Angular JS. Currently, I am faced with a scenario where I need to work with a JSP page containing a hidden input field. To set the value of this input field, I am using a session attribute like so:

  String policy = (String)session.getAttribute("POLICY_CHANGE");

  <input type="hidden" value="<%=policy%>" name="policy" ng-model="$scope.policyChange" />

My main challenge is how to bind the value of this input field to a variable $scope.policy within my controller.

JS

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
   $scope.policyChange= ; // My goal is to assign the input field's value here.
});

javascript angularjs jsp angularjs-directive

Answer 1

Answer №1

If you want to set the ng-model directive for your input, here is how you can do it:

 <input type="hidden" value="<%=policy%>" name="ng2_session" ng-modal="vm.policyChange" ng-model="policy" ng-init="policy='<%=policy%>'" />

In the controller, make sure to use the watch method.

The $watch function allows you to monitor changes within the $scope

Here's a JavaScript example:

 app.controller('myCtrl', function($scope) {
   console.log($scope.policy); // This will display the input field value.
 });

For a simple illustration:

function MyCtrl($scope) {
   $scope.$watch('policy', function() {
      console.log($scope.policy);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="MyCtrl">
      <input type="text" ng-model="policy" ng-init="policy='Bob'"/>
  </div>
</div>

Important Note: The watch method is particularly useful when you need to execute certain code upon a change in the $scope.variable.

Answer 2

If you want to set the ng-model directive for your input, here is how you can do it:

 <input type="hidden" value="<%=policy%>" name="ng2_session" ng-modal="vm.policyChange" ng-model="policy" ng-init="policy='<%=policy%>'" />

In the controller, make sure to use the watch method.

The $watch function allows you to monitor changes within the $scope

Here's a JavaScript example:

 app.controller('myCtrl', function($scope) {
   console.log($scope.policy); // This will display the input field value.
 });

For a simple illustration:

function MyCtrl($scope) {
   $scope.$watch('policy', function() {
      console.log($scope.policy);
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app>
  <h2>Todo</h2>
  <div ng-controller="MyCtrl">
      <input type="text" ng-model="policy" ng-init="policy='Bob'"/>
  </div>
</div>

Important Note: The watch method is particularly useful when you need to execute certain code upon a change in the $scope.variable.

Capturing the value of an input field within a controller in AngularJS

Answer №1

Similar questions

Using multiple html files with ui-router's ui-view feature

Incorporating image hyperlinks onto a designated webpage within a JavaScript presentation carousel

The ng-blur functionality will only trigger if the click event occurs within the bounds of the textbox

Encountering an Uncaught Error in Angular 1.2.9 despite the inclusion of ngRoute module

Extract information from a webpage using Selenium WebDriver

What is the most effective method for storing an object in React?

Retrieve the value of a nested JSON object using the name of an HTML form field, without the use of eval

Developing tests for an asynchronous function

Struggling with fixing a 500 error caused by angular routing? Let us assist you

Is browserHistory.push ineffective in react.js?

Leveraging Polymer web components without the need for a package manager

Prevent vertical axis rotation in OrbitControls with THREE.js

Implementing automatic form saving in AngularJS through sessionStorage as you enter data

Getting the string value from a table row using JavaScript

Transforming precise military time using Angular and Javascript filtering

before sending the url with fetch(url), it is adjusted

Connecting Bootstrap Tabs Dropdown to Website LinksIncorporating Bootstrap Tabs Dropdown Menu

Sending dynamic data from route provider to controller

Tips for sending a property to a function that is imported and produces a component in React

Demo showcasing the issue with the side navbar in Bootstrap not functioning as expected