A properties widget Angular directive that wraps jdorn's json-editor.
Inspired by and take advance of rodikh's angular-json-editor
Properties Widget support two way data binding of schema and value compare to rodikh's angular-json-editor.
For further information about supported schema properties and usage, check out the original json-editor.
The module doesn't include the original json-editor code, but it is included in it's bower dependencies.
Install via bower
bower install angular-props-widget --save
Then include the directive and json-editor in your html
<script src="bower_components/json-editor/dist/jsoneditor.js"></script>
<script src="bower_components/angular-props-widget/dist/angular-props-widget.min.js"></script>
The usage of this directive is quite straightforward: you create a schema in angularjs scope like so:
$scope.keyPropsSch = {
title: 'House Properties',
type: 'object',
properties: {
'name': {
type: 'string',
required: true,
minLength: 1
},
'years': {
type: 'integer',
required: true,
min: 0
},
'facilities': {
type: 'array',
uniqueItems: true,
format: 'checkbox',
items: {
type: 'string',
'enum': ['Air Condition', 'Hot Water', 'TV', 'Washing Machine']
}
}
}
};
and an empty value to hold the value of props-widget:
$scope.myKeyProps = {};
Then you declare a props-widget component to bind the schema and value like so:
<props-widget schema="keyPropsSch" ng-model="myKeyProps"/>
That's it, you now have a widget that can edit the value of type of the schema!
Clone the project, install bower and npm dependencies by running
bower install && npm install
If you dont have grunt-cli installed globally run npm install -g grunt-cli
Then run grunt
and look in the dist
folder.