Using Angular's ng-model Across Multiple Views

Question

Using Angular's ng-model Across Multiple Views

Is it possible to use ng-model to gradually build an object across multiple views?

For example, in view1 I have

<input ng-model='myObject.firstName'>

And in view2 I have

<input ng-model='myObject.lastName'>

And in view3 I have

<input ng-model='myObject.email'>

The concept is that you could click a submit button in the final view and send the object somewhere.

My initial approach is to create a service that initializes an empty object, then have functions within the service that allow controllers using the service to add their view input to the object and return it. However, I feel like this method is somewhat indirect!

If anyone has suggestions on a better approach, I would greatly appreciate it.

javascript json angularjs data-binding

Answer 1

Answer №1

If you need to implement shared objects among multiple controllers in AngularJS, you can achieve this by using directives like ng-model. Here's an example where 3 controllers share the same object and update its properties.

angular.module('test', []).factory('tested', function() {
  return {
     value : '123'  
  };
}).controller('ctrl1', function($scope, tested) {
  $scope.tested = tested;  
}).controller('ctrl2', function($scope, tested) {
  $scope.tested = tested;  
}).controller('ctrl3', function($scope, tested) {
  $scope.tested = tested;  
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="ctrl1">
    <input type="text" ng-model="tested.value" />
    {{ tested.value }}
  </div>
  
  <div ng-controller="ctrl2">
    <input type="text" ng-model="tested.value" />
    {{ tested.value }}
  </div>
  
  <div ng-controller="ctrl3">
    <input type="text" ng-model="tested.value" />
    {{ tested.value }}
  </div>
</div>

Answer 2

If you need to implement shared objects among multiple controllers in AngularJS, you can achieve this by using directives like ng-model. Here's an example where 3 controllers share the same object and update its properties.

angular.module('test', []).factory('tested', function() {
  return {
     value : '123'  
  };
}).controller('ctrl1', function($scope, tested) {
  $scope.tested = tested;  
}).controller('ctrl2', function($scope, tested) {
  $scope.tested = tested;  
}).controller('ctrl3', function($scope, tested) {
  $scope.tested = tested;  
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="test">
  <div ng-controller="ctrl1">
    <input type="text" ng-model="tested.value" />
    {{ tested.value }}
  </div>
  
  <div ng-controller="ctrl2">
    <input type="text" ng-model="tested.value" />
    {{ tested.value }}
  </div>
  
  <div ng-controller="ctrl3">
    <input type="text" ng-model="tested.value" />
    {{ tested.value }}
  </div>
</div>

Answer 3

Answer №2

When dealing with separate controllers for each view, the most effective way to share data is by utilizing a service of type "provider", "service", or "factory".

This approach allows you to manipulate your object from any controller using the specified methods.

To ensure that every view is aware of changes in the shared data, the service methods can trigger an event using:

$rootScope.$broadcast('somethingChanged', myObject);

Subsequently, each controller can listen for this event using:

$scope.$on('somethingChanged', function(data) { 
});

Answer 4

When dealing with separate controllers for each view, the most effective way to share data is by utilizing a service of type "provider", "service", or "factory".

This approach allows you to manipulate your object from any controller using the specified methods.

To ensure that every view is aware of changes in the shared data, the service methods can trigger an event using:

$rootScope.$broadcast('somethingChanged', myObject);

Subsequently, each controller can listen for this event using:

$scope.$on('somethingChanged', function(data) { 
});

Using Angular's ng-model Across Multiple Views

Answer №1

Answer №2

Similar questions

My goal is to ensure that when a user copies the URL of a website from the address bar and pastes it into a social media app, the link automatically transforms into the title of

Using ng-class directive with condition in AngularJS

Manipulating classes with JQuery through click events

Node JS server terminated due to invalid arguments: string and undefined

Comparison of Fabric JS Filters and CSS Filters

Loop through the JSONP object to display its properties

Angular 6 provides a regular expression that specifically targets the removal of any characters that are not numbers and enforces the allowance of

Transmitting an Ajax request via property path

Setting the default date in angular-bootstrap-datetimepicker: a step-by-step guide

The node-static tool is limited in its ability to serve folders that are located outside

Revamp local route variables in Express.js without the need for a page refresh

Establish a WebSocket connection via Meteor.js

Rotating an object around another object in a 3D matrix axis using Three.js

Is it possible to modify the URL parameter of a website?

Instructions for aligning an Object3D's face with another face (such as the floor) using object rotation

ExpressJs responds with an empty JSON object

Using Ajax requests in WordPress

Tutorial on creating a loop for a function based on a specific condition

What could be the reason for the active class not being triggered by Bootstrap?

Having trouble with the autocomplete feature on your textbox in CodeIgniter?