javascript - Add $$hashKey to object in Angular - Stack Overflow

The Angular-specific property on enumerated objects $$hashKeycan be used for a lot of things.

For example DOM-targeting;

<div ng-repeat="obj in objects">
    <label for="field-{{obj.$$hashKey}}">
        Label
    </label>
    <input type="text" id="field-{{obj.$$hashKey}}" />
</div>

In some weird case I am experiencing now the $$hashKey prop is not yet set on a object I want to access it on even though it is being repeated with Angular. Is there a way to set this property yourself when initializing the object?

Edit: My guess is that there is some form of execution order issue, that I access the property when Angular has yet to process the repetition. I am deep watching an object, within that object is an array with objects which is getting repeated. It's also on one of those objects that I need to access the $$hashKey property on.

Simple example;

var MyController = function($scope, Obj)
{
    $scope.obj = {
        list: [obj, obj, obj, obj]
    };

    $scope.$watch("obj", function()
    {
        var lastObj = $scope.obj.list[$scope.obj.list.length - 1];
        console.log(lastObj.$$hashKey); // Undefined?
    }, true);

    $scope.addObj = function()
    {
        $scope.obj.list.push(new Obj());
    };
};

Edit2: jsFiddle /

The Angular-specific property on enumerated objects $$hashKeycan be used for a lot of things.

For example DOM-targeting;

<div ng-repeat="obj in objects">
    <label for="field-{{obj.$$hashKey}}">
        Label
    </label>
    <input type="text" id="field-{{obj.$$hashKey}}" />
</div>

In some weird case I am experiencing now the $$hashKey prop is not yet set on a object I want to access it on even though it is being repeated with Angular. Is there a way to set this property yourself when initializing the object?

Edit: My guess is that there is some form of execution order issue, that I access the property when Angular has yet to process the repetition. I am deep watching an object, within that object is an array with objects which is getting repeated. It's also on one of those objects that I need to access the $$hashKey property on.

Simple example;

var MyController = function($scope, Obj)
{
    $scope.obj = {
        list: [obj, obj, obj, obj]
    };

    $scope.$watch("obj", function()
    {
        var lastObj = $scope.obj.list[$scope.obj.list.length - 1];
        console.log(lastObj.$$hashKey); // Undefined?
    }, true);

    $scope.addObj = function()
    {
        $scope.obj.list.push(new Obj());
    };
};

Edit2: jsFiddle http://jsfiddle/2sbWp/2/

• javascript
• angularjs

Share Improve this question Follow edited May 6, 2014 at 19:40 Rasmus asked May 6, 2014 at 17:29 RasmusRasmus 4,19077 gold badges2424 silver badges3232 bronze badges 4

• Please create a plunker or jsFiddle, it's difficult to replicate the problem you are experiencing – SoluableNonagon Commented May 6, 2014 at 17:34
• My question is pretty straightforward. Replicating the problem will take time even for me as I have to strip out a lot of pany-specific code which I can't display publicly. – Rasmus Commented May 6, 2014 at 17:37
• I agree that it's straightforward, I'm not asking you to post pany code, just to replicate the issue using dummy code. – SoluableNonagon Commented May 6, 2014 at 17:43
• Check my edit, I think that example should make it clearer on what is going on. – Rasmus Commented May 6, 2014 at 17:48

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Use $timeout with no delay value to defer until the $$hashKey property is available:

$timeout(function(){console.log(lastObj.$$hashKey)});

A working fork of your Fiddle

I created a dummy example based on you code, see here: http://plnkr.co/edit/9PNc6bcy1TO4Zaeyuvwq?p=preview

var app = angular.module( 'gssApp', [] );

app.controller( 'gssAppController', [ '$scope', '$http', function ( $scope, $http )
{
  var obj = {'hash': 'test'};
  $scope.newObject = {'hash': 'test'};
  $scope.model = null;

  $scope.objects = [];

  $scope.addObj = function(){
    if($scope.model !== null && $scope.model !== undefined){
      $scope.objects.push({'hash': $scope.model});
      $scope.model = '';
      angular.forEach($scope.objects, function(key, value){
        console.log(value, key);
      }); 
    }
  }; 

}] );

HTML

<body ng-app="gssApp" ng-controller="gssAppController">
    <div ng-repeat="obj in objects">
      <label for="field-{{obj.$$hashKey}}" ng-click="alert(obj.$$hashKey)">
         Label
      </label>
      <input type="text" id="field-{{obj.$$hashKey}}" />
    </div>
    <input type="text" placeholder='add new key' ng-model="model">
    <button ng-click="addObj();">Submit</button>
</body>

Hopefully this sheds some light on the $$hashkey