AngularJS Sharing Data Across Controllers with a Service

An AngularJS controller manages the data that is used with its associated HTML views. In some cases, there is a need for several controllers to share some common data. The common data can be user, security or settings that are needed to enable some access or configuration to elements on the view. For other cases, we may need to share data in different controllers to complete a process.

To see this in action, we can create a simple order system which works like a wizard and collects customer and food information. Each view on this demo is managed by a different controller.

Code:

Controllers are stateless and the data that is used by the controller is initialized every time it is loaded. To address this, we need a service that can be injected into the different controllers and can maintain the information. In AngularJS, a service is a singleton which only gets instantiated one time during the life cycle of the module. This allows us to maintain and share information across the initialization of different controllers.

In our demo, the svcAppData services persists the data that is captured from the user in each view.

Service Model:

this.detail = { name: '', dish: '', drink: '' };

Each controller accesses this information via the service detail model. This is done by the following statement:

ctrl.order = svcAppData.detail;

The views bind to the information by using the ng-model directive as shown below:

<input class="form-control" ng-model="ctrl.order.name" placeholder="enter name" type="text">

As the user enters the information, the data field in the model (detail) gets updated with the new information.

I hope this article is able to provide some clarity on how to use services and share data across controllers.

AngularJS ngOption Directive Simplified

With AngularJS, we can use the ngOption directive to dynamically create the options that are available from the select input field. There are a few ways to use this directive and depending on the application requirements, we may choose one from another. Let’s try to simplify its usage by using some practical examples:

Demo Preview:  (see working demo below)

Bind to a String Array:

We can use this approach to bind a list of strings as options. Both the input value and text take on the array value. When an option is selected, the Value is set to the model defined by the ngModel Directive. When we look at the result from Selected Option 1 (see demo below), we can see how the selected option text is also the selected option value.

Expression	ng-options="option for option in ctrl.makes"
Description	Use the string as both value and text.

Bind to Collection of Objects:

This approach provides more flexibility since it allows us to bind to more than just a Value/Text reference. We can use an object as an option, and when the option is selected, this object is assigned to the model defined by the ngModel Directive. This means that in addition to the value, we have access to all other properties of this object. Let’s look at Seleted Option 2 (demo). As we select a value from the select control, we can see the output display the JSON contained by the object.

Expression	ng-options="car as car.model for car in ctrl.cars"
Description	Use a car object as value, use the model attribute as text.

Bind to Collection of Objects with Explicit Attributes as Key/Value Pairs:

This approach allows us to use a collection with key/value nodes. This provides the flexibility to explicitly indicate what attributes from the object should be the text and value. It also uses simple data types for the binding, so only the attributes used in the ngOption directive are assigned. If we look at Selected Option 3, we can see that the value contained in the id property is displayed.

Expression	ng-options="car.id  as car.model for car in ctrl.cars"
Description	Use attribute id as value and model as text.

Bind to Collection of Objects with Explicit JSON:

This approach is similar to the previous one, but it allows us to indicate that we may just want to use some attributes in a JSON structure from the object and only assigned those to the model. In Selected Option 4, we can see how we are only using a couple of attributes from the object and creating a JSON to map them. This is then assigned as an object to the model.

Expression	ng-options="{model:car.model,id: car.id } as car.model for car in ctrl.cars track by car.id"
Description	Use JSON declaration and assigned only the attributes id and model. Use model as text. The selected value is determined by card.id

Track Selected Object:

One important item to note when using the ngOption directive with complex types is that we need to explicitly indicate what attribute should be used to track the selected option. This is done with the expression “track by”.  If this is not properly assigned, the selected text does is not displayed even though an object assignment is actually made. See Selected Option 5.

CodeProject

Expression	ng-options="{model:car.model,id: car.id } as car.model for car in ctrl.cars"
Description	Use JSON declaration and assigned only the attributes id and model. Use model as text. There is no tracking of the value, so no text is displayed.

Demo:

Well I hope this provides some clarifications on how to use the ngOption directive.

Originally posted by ozkary.com