I can't see my loading label for fastest two way binding.
I have a flag for show and hide loading label. but am unable to see the loading label. because angular is rendering(binding) very speed.
Expectation 1:-
So I want to show and hide the
isloading
flag while rendering callback is start and end. I hope this is the proper way to my solution. Is it possible?
Expectation 2:-
And I have check with stack overflow, then are suggest to use
$timeout
. But I don't think this is a good solution. But if we can't do my first expectation then I can go with the$timeout
way. But here I don't set approximate time to $timeout function, I would be set exact DOM rendering time on the $timeout function.
I made following snippet for the issue and you can easily make a snippet answer.
angular.module("app",[]).controller("controllerApp", function($scope)
{
$scope.IsLoading=true;
// now the data binding and rendering is starting
$scope.data = [
{
"FieldGroupName": "General Information",
"cocVersionDataFieldCollection": [
{
"DocumentVersionFieldId": 1,
"FieldGroupName": "General Information",
"FieldPrefix": "0.1",
"FieldName": "Make",
"DisplayOrder": 1,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": "11",
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": false,
"varaintData": {
"VersionId": "number;",
"DocumentVersionFieldId": "number",
"VariantId": "number",
"ElementId": "number",
"ElementVariantId": "number",
"VariantValue": "string",
"IsRecordVisible": "boolean",
"cocElementLanguageDataCollection":[],
"hasValidationError": "boolean"
}
},
{
"DocumentVersionFieldId": 2,
"FieldGroupName": "General Information",
"FieldPrefix": "0.2",
"FieldName": "Type",
"DisplayOrder": 2,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": "K",
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": false,
"varaintData": null
},
{
"DocumentVersionFieldId": 1001,
"FieldGroupName": "General Information",
"FieldPrefix": "0.2",
"FieldName": "Variant",
"DisplayOrder": 3,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": "1",
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 1003,
"FieldGroupName": "General Information",
"FieldPrefix": "0.2.1",
"FieldName": "Commercial Name(s)",
"DisplayOrder": 5,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": "1",
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 3,
"FieldGroupName": "General Information",
"FieldPrefix": "0.4",
"FieldName": "Vehicle Category",
"DisplayOrder": 6,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": "11",
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 4,
"FieldGroupName": "General Information",
"FieldPrefix": "0.5",
"FieldName": "Company Name and Address of the manufacturer",
"DisplayOrder": 7,
"IsMultiElement": true,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": true,
"FieldValueCobmination": "<b>Address Line 2</b>: err; <b>Address line 3</b>: 12; ",
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 5,
"FieldGroupName": "General Information",
"FieldPrefix": "0.6",
"FieldName": "Location and method of attachent of satutory plates",
"DisplayOrder": 8,
"IsMultiElement": true,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": true,
"FieldValueCobmination": null,
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 1004,
"FieldGroupName": "General Information",
"FieldPrefix": "0.6",
"FieldName": "Location of the vechicle identification number",
"DisplayOrder": 9,
"IsMultiElement": true,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": true,
"FieldValueCobmination": null,
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
}
]
},
{
"FieldGroupName": "General Construction Characteristics",
"cocVersionDataFieldCollection": [
{
"DocumentVersionFieldId": 7,
"FieldGroupName": "General Construction Characteristics",
"FieldPrefix": "1",
"FieldName": "Number of Axles",
"DisplayOrder": 10,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": null,
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 1023,
"FieldGroupName": "General Construction Characteristics",
"FieldPrefix": "1",
"FieldName": "Number of Wheels",
"DisplayOrder": 11,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": null,
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 8,
"FieldGroupName": "General Construction Characteristics",
"FieldPrefix": "3",
"FieldName": "Powered Axles",
"DisplayOrder": 12,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": null,
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 1033,
"FieldGroupName": "General Construction Characteristics",
"FieldPrefix": "3",
"FieldName": "Powered Axles Position",
"DisplayOrder": 13,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": true,
"FieldValueCobmination": null,
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
}
]
},
{
"FieldGroupName": "Main Dimensions",
"cocVersionDataFieldCollection": [
{
"DocumentVersionFieldId": 9,
"FieldGroupName": "Main Dimensions",
"FieldPrefix": "4",
"FieldName": "Wheel Base",
"DisplayOrder": 13,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": "454",
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 1007,
"FieldGroupName": "Main Dimensions",
"FieldPrefix": "4.1",
"FieldName": "Axle spacing",
"DisplayOrder": 14,
"IsMultiElement": true,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": null,
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 10,
"FieldGroupName": "Main Dimensions",
"FieldPrefix": "5",
"FieldName": "Length",
"DisplayOrder": 15,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": null,
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 11,
"FieldGroupName": "Main Dimensions",
"FieldPrefix": "6",
"FieldName": "Width",
"DisplayOrder": 16,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": null,
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
},
{
"DocumentVersionFieldId": 12,
"FieldGroupName": "Main Dimensions",
"FieldPrefix": "7",
"FieldName": "Height",
"DisplayOrder": 20,
"IsMultiElement": false,
"FieldGroupID": 0,
"IsMultiRowExist": false,
"IsMultiLanguage": false,
"FieldValueCobmination": "15634",
"IsOptionExists": false,
"IsSalesVersionExists": false,
"IsMarketingcodeExists": false,
"IsMandatoryElementDataMissing": false,
"IsOverridable": true,
"varaintData": null
}
]
}
];
// now the data binding and rendering is ending
$scope.IsLoading=false;
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="controllerApp">
<span ng-show="IsLoading">loading...</span>
<table ng-repeat="obj in data">
<tr >
<td>
<b> {{obj.FieldGroupName}}</b>
<table style="border:solid 1px dashed; border-color:black">
<tr ng-repeat="objChild in obj.cocVersionDataFieldCollection">
<td>{{objChild.FieldName}}</td>
<td>{{objChild.FieldName}}</td>
<td>{{objChild.FieldName}}</td>
<td>{{objChild.FieldName}}</td>
<td>{{objChild.FieldName}}</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
You can try to sync your DOM / Application like in this simple demo fiddle. It ensures that the
ng-repeat
did rendered all items before displaying it. Meanwhileloading
is displayed. I think it's a little hack but it works like a charm if you realy want to sync. your DOM & JS-Application. IMO this it not needed because E2E binding is async all the time and its fine.View
AngularJS Application