How to reorder based on another array in Angular JS

Question

Please check this Fiddle: http://jsfiddle.net/houmaka/vHXy4/

When user fills different fields ng-repeat order the output. How can I enforce a custom ordering based on my fields array? (There are more than 20 fields in the form, I just put a snapshot of the actual form.)

a quick glance:

$scope.fields = [];
$scope.fields = {
    contact_person: 'Contact Person',
    app_owner_name: 'Name of Application Owner',
    app_owner_phone_number: 'Application Owner Phone Number',
}

And to show them:

  <div>
    <div ng-repeat="(key, value) in user">
        <div ng-show="value">
            <div>{{fields[key]}}:</div>
            <div>{{value}}</div>
        </div>
    </div>
   </div>

Thanks

Answer 1

I would suggest this fields model:

$scope.fields = [
    { index: 3, name: 'Contact Person', id: 'contact_person' },
    { index: 2, name: 'Name of Application Owner', id: 'app_owner_name' },
    { index: 1, name: 'Application Owner Phone Number', id: 'app_owner_phone_number' },
];

And this ngRepeat usage:

    <div ng-repeat="field in fields | orderBy: 'index' ">
        <div ng-show="user[field.id]">
            <div>{{field.name}}</div>
            <div>{{user[field.id]}}</div>
        </div>
    </div>