Skip to content

Commit c06f05c

Browse files
davidlgjdavidlgj
committed
Arrays!
1 parent b72cb23 commit c06f05c

8 files changed

+232
-34
lines changed

‎.jscsrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
22
"preset": "google",
3-
"maximumLineLength": 100,
3+
"maximumLineLength": 1000,
44
"requireSemicolons": true
55
}

‎README.md

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
Angular Bootstrap Decorator
2+
==========================
3+
4+
For https://github.com/Textalk/angular-schema-form
5+
6+
The new Bootstrap Decorator. Work in Progress. Consider it ALPHA quality.
7+
8+
* Uses the new builder structure for faster form building.
9+
* No need for <bootstrap-decorator> tags anymore!

‎bootstrap-decorator.js

+75-13
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎bootstrap-decorator.min.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/bootstrap-example.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -282,7 +282,7 @@ <h3>Schema</h3>
282282
$scope.selectedTest = $scope.tests[0];
283283
});
284284
} else {
285-
$scope.selectedTest = $scope.tests[0];
285+
$scope.selectedTest = $scope.tests[4];
286286
}
287287

288288
$scope.$watch('selectedTest',function(val){

‎examples/data/array.json

+63-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44
"title": "Comment",
55
"required": ["comments"],
66
"properties": {
7+
"tags": {
8+
"type": "array",
9+
"items": {
10+
"type": "string"
11+
}
12+
},
713
"comments": {
814
"type": "array",
915
"maxItems": 2,
@@ -34,6 +40,46 @@
3440
},
3541
"required": ["name","comment"]
3642
}
43+
},
44+
"matrix": {
45+
"type": "array",
46+
"items": {
47+
"type": "array",
48+
"items": {
49+
"type": "string"
50+
}
51+
}
52+
},
53+
"subs": {
54+
"type": "array",
55+
"items": {
56+
"type": "object",
57+
"properties": {
58+
"sub": {
59+
"type": "array",
60+
"items": {
61+
"type": "string"
62+
}
63+
}
64+
}
65+
}
66+
},
67+
"triplesubs": {
68+
"type": "array",
69+
"items": {
70+
"type": "object",
71+
"properties": {
72+
"sub": {
73+
"type": "array",
74+
"items": {
75+
"type": "array",
76+
"items": {
77+
"type": "string"
78+
}
79+
}
80+
}
81+
}
82+
}
3783
}
3884
}
3985
},
@@ -42,6 +88,7 @@
4288
"type": "help",
4389
"helpvalue": "<h4>Array Example</h4><p>Try adding a couple of forms, reorder by drag'n'drop.</p>"
4490
},
91+
"tags",
4592
{
4693
"key": "comments",
4794
"add": "New",
@@ -63,10 +110,25 @@
63110
}
64111
]
65112
},
113+
"matrix",
114+
{
115+
"type": "array",
116+
"key": "subs",
117+
"items": [
118+
"subs[].sub"
119+
]
120+
},
121+
"triplesubs",
66122
{
67123
"type": "submit",
68124
"style": "btn-info",
69125
"title": "OK"
70126
}
71-
]
127+
],
128+
"model": {
129+
"tags": ["one", "two"],
130+
"comments": [{}],
131+
"matrix": [["one","two"],["three"]],
132+
"subs": [{ "sub":["yes!"] }]
133+
}
72134
}

‎src/array.html

+8-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
<div sf-array="form" class="schema-form-array {{form.htmlClass}}"
2-
sf-field-model>
3-
<h3 ng-show="form.title && form.notitle !== true">{{ form.title }}</h3>
4-
<ol class="list-group" ng-model="modelArray" ui-sortable>
1+
<div class="schema-form-array {{form.htmlClass}}"
2+
sf-new-array>
3+
<h3 ng-show="form.title && form.notitle !== true"></h3>
4+
<ol class="list-group" sf-field-model schema-validate="form" ui-sortable>
55
<li class="list-group-item {{form.fieldHtmlClass}} schema-form-array-items"
6-
ng-repeat="model in modelArray track by $index">
6+
sf-field-model="ng-repeat"
7+
ng-repeat="item in $$value$$ track by $index ">
78
<button ng-hide="form.readonly || form.remove === null"
89
ng-click="deleteFromArray($index)"
910
style="position: relative; z-index: 20;"
1011
type="button" class="close pull-right">
1112
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
1213
</button>
14+
#{{item}}#{{modelArray}}*
15+
1316
<!--<sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator> -->
1417

1518
</li>

‎src/bootstrap-decorator.js

+74-12
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,48 @@
1-
angular.module('schemaForm').config(['schemaFormDecoratorsProvider', 'sfBuilderProvider',
2-
function(decoratorsProvider, sfBuilderProvider) {
1+
2+
angular.module('schemaForm').config(['schemaFormDecoratorsProvider', 'sfBuilderProvider', 'sfPathProvider',
3+
function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
34
var base = 'decorators/bootstrap/';
45

5-
var simpleBuilder = sfBuilderProvider.builders.si;
6+
var simpleTransclusion = sfBuilderProvider.builders.simpleTransclusion;
67
var ngModelOptions = sfBuilderProvider.builders.ngModelOptions;
78
var ngModel = sfBuilderProvider.builders.ngModel;
89

910
var array = function(args) {
10-
console.log('array', args)
11+
console.log('array', args);
12+
1113
var items = args.fieldFrag.querySelector('li.schema-form-array-items');
1214
if (items) {
13-
args.state.keyRedaction = args.state.keyRedaction || 0;
14-
args.state.keyRedaction += args.form.key.length + 1;
15+
state = angular.copy(args.state);
16+
state.keyRedaction = state.keyRedaction || 0;
17+
state.keyRedaction += args.form.key.length + 1;
18+
19+
// Special case, an array with just one item in it that is not an object.
20+
// So then we just override the modelValue
21+
if (args.form.schema && args.form.schema.items &&
22+
args.form.schema.items.type &&
23+
args.form.schema.items.type.indexOf('object') === -1 &&
24+
args.form.schema.items.type.indexOf('array') === -1) {
25+
console.log('setting state modelValue', args.form);
26+
var strKey = sfPathProvider.stringify(args.form.key).replace(/"/g, '&quot;') + '[$index]';
27+
state.modelValue = 'getModelArray()[$index]'; //(args.state.modelName || 'model') + (strKey[0] !== '[' ? '.' : '') + strKey;
28+
//state.modelValue = 'model' + sfPathProvider.normalize(args.form.key) + '[$index]'; // 'modelArray[$index]';
29+
} else {
30+
state.modelName = 'item';
31+
}
1532

16-
var childFrag = args.build(args.form.items, args.path + '.items', args.state);
33+
var childFrag = args.build(args.form.items, args.path + '.items', state);
1734
items.appendChild(childFrag);
1835
}
1936
};
2037
var defaults = [ngModel, ngModelOptions];
2138
decoratorsProvider.defineDecorator('bootstrapDecorator', {
2239
textarea: {template: base + 'textarea.html', builder: defaults},
23-
fieldset: {template: base + 'fieldset.html', builder: simpleBuilder},
24-
array: {template: base + 'array.html', builder: [ngModel, ngModelOptions, array]},
40+
fieldset: {template: base + 'fieldset.html', builder: simpleTransclusion},
41+
array: {template: base + 'array.html', builder: [ngModelOptions, ngModel, array]},
2542
tabarray: {template: base + 'tabarray.html', replace: false},
2643
tabs: {template: base + 'tabs.html', replace: false},
27-
section: {template: base + 'section.html', builder: simpleBuilder},
28-
conditional: {template: base + 'section.html', builder: simpleBuilder},
44+
section: {template: base + 'section.html', builder: simpleTransclusion},
45+
conditional: {template: base + 'section.html', builder: simpleTransclusion},
2946
actions: {template: base + 'actions.html', builder: defaults},
3047
select: {template: base + 'select.html', builder: defaults},
3148
checkbox: {template: base + 'checkbox.html', builder: defaults},
@@ -41,4 +58,49 @@ function(decoratorsProvider, sfBuilderProvider) {
4158
'default': {template: base + 'default.html', builder: defaults}
4259
}, []);
4360

44-
}]);
61+
}]).filter('minLength', function() {
62+
return function(input, min) {
63+
input = input || [];
64+
var diff = min - input.length;
65+
if (diff > 0) {
66+
return input.concat(new Array(diff));
67+
}
68+
return input;
69+
};
70+
}).directive('sfNewArray', function() {
71+
return {
72+
scope: false,
73+
link: function(scope, element, attrs) {
74+
scope.min = 0;
75+
scope.appendToArray = function() {
76+
var empty;
77+
78+
// Same old add empty things to the array hack :(
79+
if (scope.form && scope.form.schema && scope.form.schema.items) {
80+
if (scope.form.schema.items.type === 'object') {
81+
empty = {};
82+
} else if (scope.form.schema.items.type === 'array') {
83+
empty = [];
84+
}
85+
}
86+
87+
if (!scope.ngModel.$modelValue) {
88+
scope.ngModel.$setViewValue([]);
89+
scope.ngModel.$commitViewValue([]);
90+
}
91+
scope.ngModel.$modelValue.push(empty);
92+
93+
};
94+
95+
/*scope.$watch('ngModel.$modelValue', function() {
96+
console.log(scope.ngModel.$modelValue)
97+
scope.modelArray = scope.ngModel.$modelValue;
98+
});*/
99+
scope.getModelArray = function() {
100+
console.log(scope.ngModel.$modelValue);
101+
return scope.ngModel.$modelValue;
102+
};
103+
104+
}
105+
};
106+
});

0 commit comments

Comments
 (0)