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/
Share Improve this question edited May 6, 2014 at 19:40 Rasmus asked May 6, 2014 at 17:29 RasmusRasmus 4,1907 gold badges24 silver badges32 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
2 Answers
Reset to default 5Use $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