angular material md-select using track by but still getting $$hashKey

Question

I'm trying to get rid of the $$hashKey value that angular adds to your model value. According to most sources implementing a track by should solve this issue but I'm doing something wrong.

The vm.productTypes is any array of objects with id properties that are GUIDs.

Resulting model value...

$$hashKey: "object:445"
id: "9e695340-d10a-40ca-9cff-e9a93388912a"
name: "Medical"
type: 1
typeString: "ProductTypes"

HTML Code :

<md-select id="type" ng-model="vm.currentProduct.productType" name="type"
                           ng-model-options="{trackBy: '$value.id'}"
                           required>
                    <md-option ng-repeat="pt in vm.productTypes track by pt.id" ng-value="pt">
                        {{pt.name}}
                    </md-option>
                </md-select>

Where am I going wrong?

Update:

Seems that the name attribute is causing this strange behavior. Bug? http://codepen.io/anon/pen/LNpMYJ

Ramesh Papaganti · Answer 1 · 2017-04-24T10:07:35.173

2

Use ng-model-options="{ trackBy: '$value.id' }".

If you are getting list data through $http call, First prepare model object and then load list data.
Or prepare model object and put into an object which is holding hole form data

Link.

edited Apr 24 '17 at 10:07

answered Apr 19 '17 at 11:19

Ramesh Papaganti

7,311
3
31
36

score 0 · Answer 2 · answered Mar 05 '16 at 19:20

0

        <html>
<head>
<title>$$HaskKey Remover</title>
    <script src="https://code.angularjs.org/1.3.8/angular.min.js></script>
        <script>
        var myApp= angular.module('MyApp', []);
        myApp.controller('MainCtrl', ['$scope',
          function($scope) {
         $scope.list = [
              {key: "1", name: "Rose"},
              {key: {id:2}, name: "Sachin"},
              {key: {id:3}, name: "Sandy"}
            ];
           console.log($scope.list);
          }
        ]);
        </script>
        <head>
        <title>Removing $$hashKey when using ng-options</title>
        </head>
        <body ng-app='MyApp'>
            <div ng-controller='MainCtrl'>
        <form>   
           <label for="Select Box">Make a choice of Players:</label>
            <select name="selectBx" id="selectBx" ng-model="optionsData"
               ng-options="item.name for item in list track by item.key">
              </select>
        </form>
          </div>
        </body>

        </html>

answered Mar 05 '16 at 19:20

since u use ng-repeat by default angular will add the $$hashKey to it. if we need to remove it simply we can use track by $index or id or any key, – Mar 05 '16 at 19:27
I'm already tracking by an id property. Check out my comment I made, it seems that when the name attribute is on the md-select it still adds a the $$hashKey. Your answer does not really give any new information as to why the name attribute causes this behavior. – Tersius Mar 06 '16 at 05:31
Hi buddy, When i run code pen link given above shows me the error message ,"SyntaxError: missing ; before statement angular-material.js:1:4 Error: [$injector:modulerr] Failed to instantiate module MyApp due to: [$injector:modulerr] Failed to instantiate module ngMaterial due to: [$injector:nomod] Module 'ngMaterial' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument. http://errors.angularjs.org/1.4.8/$injector/nomod?p0=ngMaterial minErr loadModules/<@https://ajax. – Mar 06 '16 at 07:06

angular material md-select using track by but still getting $$hashKey

2 Answers2