Home > Angular JS > Angular JS: DataType gets added in value for ng-options when accessing value outside of angular scope

Angular JS: DataType gets added in value for ng-options when accessing value outside of angular scope

Hi Friends,

While working on Angular JS I came across an issue where value data type got added to option value.

Problem statement:

Check the following ng-options binding.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
 angular.module("BlogTest", []).
 controller("BlogTestController", ["$scope", function($scope) {
 $scope.users = [
 {userId: 101, userName: "One"},
 {userId: 102, userName: "Two"},
 {userId: 103, userName: "Three"}
 ];
 $scope.calculateQuantity = function() {
 var e = document.getElementById("ddlusers");
 var strUser = e.options[e.selectedIndex].value;
 $('#angularselected').html($scope.users1); // output as 101,102,103
 $('#javascriptselected').html(strUser); // output as number:101, number:102, number:103
 $('#jqueryselected').html($("#ddlusers").val()); // output as number:101, number:102, number:103
 };
 }]);
</script>
</head>
<body>
<div ng-app="BlogTest" ng-controller="BlogTestController">
<select ng-model="users1" id="ddlusers" ng-options="user.userId as user.userName for user in users">
</select></br>
Angular selected :: <span id="angularselected"></span></br>
JavaScript selected :: <span id="javascriptselected"></span></br>
jQuery selected :: <span id="jqueryselected"></span></br>
<input type="button" value="Selected value" ng-click="calculateQuantity()"></div>
</body>
</html>

Above code binds the option perfectly but when if we try to access the value outside the angular scope we found that value is getting added with data type of value.

Below screen shot showing the difference between accessing the value within the scope and outside the scope using JavaScript or jQuery.

view1

view2

view3

If you check the rendered HTML you will found as following where datatype gets added in value

view4

Solution:

The solution to this is to use ‘track by’ as shown in below code snippet.

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
 angular.module("BlogTest", []).
 controller("BlogTestController", ["$scope", function($scope) {
 $scope.users = [
 {userId: 101, userName: "One"},
 {userId: 102, userName: "Two"},
 {userId: 103, userName: "Three"}
 ];
 $scope.calculateQuantity = function() {
 var e = document.getElementById("ddlusers");
 var strUser = e.options[e.selectedIndex].value;
 $('#angularselected').html($scope.users1); // output as 101,102,103
 $('#javascriptselected').html(strUser); // output as number:101, number:102, number:103
 $('#jqueryselected').html($("#ddlusers").val()); // output as number:101, number:102, number:103
 };
 }]);
</script>
</head>
<body>
<div ng-app="BlogTest" ng-controller="BlogTestController">
<select ng-model="users1" id="ddlusers" ng-options="user.userId as user.userName for user in users track by user.userId">
</select></br>
Angular selected :: <span id="angularselected"></span></br>
JavaScript selected :: <span id="javascriptselected"></span></br>
jQuery selected :: <span id="jqueryselected"></span></br>
<input type="button" value="Selected value" ng-click="calculateQuantity()"></div>
</body>
</html>

Now if you see the result, you will find that datatype got removed from the source HTML

view10

And the result now for Angular and non-angular is same.

view7

view8

view9

Happy coding and Happy New Year 2017.

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: