Archive

Posts Tagged ‘scope’

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

January 12, 2017 Leave a comment

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