处理 angular 双向绑定占用 DOM 渲染时间
Dealing with angular two way binding to take DOM Rendering time
我看不到最快双向绑定的加载标签。
我有一个用于显示和隐藏加载标签的标志。但看不到加载标签。因为 angular 渲染(绑定)速度非常快。
期望 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?
期望 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.
我针对该问题制作了以下片段,您可以轻松地做出片段回答。
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>
您可以尝试同步您的 DOM / 应用程序,就像在这个简单的 demo fiddle 中一样。它确保 ng-repeat
在显示之前渲染了所有项目。同时显示loading
。我认为这是一个小技巧,但如果您真的想要同步,它就像一个魅力。你的 DOM & JS-Application。 IMO 这不需要它,因为 E2E 绑定一直是异步的,而且很好。
查看
<div ng-controller="MyCtrl">
<span ng-show="isLoading">loading...</span>
<table ng-repeat="obj in data" ng-show="!isLoading">
<tr>
<td>
<b> {{obj.FieldGroupName}}</b>
<table style="border:solid 1px dashed; border-color:black">
<tr ng-repeat="objChild in obj.cocVersionDataFieldCollection"
ng-init="checkLoadingState($index)">
<td>
{{objChild.FieldName}}
<td>
{{objChild.FieldName}}
<td>
{{objChild.FieldName}}
</td>
<td>
{{objChild.FieldName}}
</td>
<td>
{{objChild.FieldName}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
AngularJS申请
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $timeout) {
$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
}]
}];
var itemCount = 0;
var currentItem = 0;
// now the data binding and rendering is ending
$scope.data.forEach(function (data) {
itemCount += Object.keys(data.cocVersionDataFieldCollection).length;
});
$scope.checkLoadingState = function (index) {
currentItem++;
if (itemCount === currentItem) {
$timeout(function () {
$scope.isLoading = false;
}, 250);
}
}
});
我看不到最快双向绑定的加载标签。
我有一个用于显示和隐藏加载标签的标志。但看不到加载标签。因为 angular 渲染(绑定)速度非常快。
期望 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?
期望 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.
我针对该问题制作了以下片段,您可以轻松地做出片段回答。
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>
您可以尝试同步您的 DOM / 应用程序,就像在这个简单的 demo fiddle 中一样。它确保 ng-repeat
在显示之前渲染了所有项目。同时显示loading
。我认为这是一个小技巧,但如果您真的想要同步,它就像一个魅力。你的 DOM & JS-Application。 IMO 这不需要它,因为 E2E 绑定一直是异步的,而且很好。
查看
<div ng-controller="MyCtrl">
<span ng-show="isLoading">loading...</span>
<table ng-repeat="obj in data" ng-show="!isLoading">
<tr>
<td>
<b> {{obj.FieldGroupName}}</b>
<table style="border:solid 1px dashed; border-color:black">
<tr ng-repeat="objChild in obj.cocVersionDataFieldCollection"
ng-init="checkLoadingState($index)">
<td>
{{objChild.FieldName}}
<td>
{{objChild.FieldName}}
<td>
{{objChild.FieldName}}
</td>
<td>
{{objChild.FieldName}}
</td>
<td>
{{objChild.FieldName}}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
AngularJS申请
var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', function($scope, $timeout) {
$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
}]
}];
var itemCount = 0;
var currentItem = 0;
// now the data binding and rendering is ending
$scope.data.forEach(function (data) {
itemCount += Object.keys(data.cocVersionDataFieldCollection).length;
});
$scope.checkLoadingState = function (index) {
currentItem++;
if (itemCount === currentItem) {
$timeout(function () {
$scope.isLoading = false;
}, 250);
}
}
});