Sunday, February 24, 2013

Implementing a database admin interface in AngularJS is a breeze

Implementing a database interface(think phpPgAdmin) via web with semantics (read: HTML5) and AngularJS is a walk in the park

View:

<div ng-repeat='p in personTable'>
    {{p.label }} <input ng-model='person[p.fieldName]' type='{{p.type}}' />
</div>


<div>Favorite Number via slider: <input ng-model='person.FavoriteNumber' type='range'/></div>


<hr/>


{{person}}



Controller and models:

function Something($scope) {
    $scope.personTable = [
        { fieldName: 'Lastname', type : 'text' },
        { fieldName: 'Firstname', type : 'text' },
        { fieldName: 'Birthday', type : 'date' },    
        { fieldName: 'FavoriteNumber', type : 'number', label: 'Favorite #' }
    ];
    
    for(var fieldIndex in $scope.personTable) {
        var field = $scope.personTable[fieldIndex];
        if (field.label == undefined) 
            field.label = field.fieldName;
    };
    
    $scope.person = { Lastname : 'Lennon', Firstname : 'John', Birthday: '1940-10-01', FavoriteNumber : 9 };
    
}

Works on Chrome

Live code: http://jsfiddle.net/5WvWP/

No comments:

Post a Comment