CODEWITHSUNDEEP
angularjsangular-materialangularjs-track-by
Tersius
Tersius

Reputation: 367

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

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

Upvotes: 1

Views: 2949

Answers (2)

Ramesh Papaganti
Ramesh Papaganti

Reputation: 7861

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.

Upvotes: 2

user6022884
user6022884

Reputation: 

        <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>

Upvotes: 0

Related Questions