Skip to content

Commit 6c8fb47

Browse files
davidlgjdavidlgj
committed
tabarrays and array fixes
1 parent 8ed001c commit 6c8fb47

File tree

6 files changed

+37
-22
lines changed

6 files changed

+37
-22
lines changed

‎README.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ Angular Bootstrap Decorator
33

44
For https://github.com/Textalk/angular-schema-form
55

6-
The new Bootstrap Decorator. Work in Progress. Consider it ALPHA quality.
6+
The new Bootstrap Decorator. Work in Progress. Consider it BETA quality.
77

88
* Uses the new builder structure for faster form building.
99
* No need for <bootstrap-decorator> tags anymore!

‎examples/data/array.json

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"type": "array",
99
"maxItems": 4,
1010
"minItems": 2,
11+
"uniqueItems": true,
1112
"items": {
1213
"type": "string"
1314
}

‎examples/data/tabarray.json

+1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"properties": {
66
"comments": {
77
"type": "array",
8+
"minItems": 2,
89
"items": {
910
"type": "object",
1011
"properties": {

‎src/array.html

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,10 @@
33
sf-new-array>
44
<h3 ng-show="form.title && form.notitle !== true"></h3>
55
<ol class="list-group" ui-sortable>
6-
<li class="list-group-item {{form.fieldHtmlClass}} schema-form-array-items"
6+
<li class="list-group-item {{form.fieldHtmlClass}}"
7+
schema-form-array-items
78
sf-field-model="ng-repeat"
8-
ng-repeat="item in $$value$$ track by $index ">
9+
ng-repeat="item in $$value$$ track by $index">
910
<button ng-hide="form.readonly || form.remove === null"
1011
ng-click="deleteFromArray($index)"
1112
ng-disabled="form.schema.minItems >= modelArray.length"

‎src/bootstrap-decorator.js

+8-11
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
21
angular.module('schemaForm').config(['schemaFormDecoratorsProvider', 'sfBuilderProvider', 'sfPathProvider',
32
function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
43
var base = 'decorators/bootstrap/';
@@ -9,9 +8,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
98
var sfField = sfBuilderProvider.builders.sfField;
109

1110
var array = function(args) {
12-
console.log('array', args);
13-
14-
var items = args.fieldFrag.querySelector('li.schema-form-array-items');
11+
var items = args.fieldFrag.querySelector('[schema-form-array-items]');
1512
if (items) {
1613
state = angular.copy(args.state);
1714
state.keyRedaction = state.keyRedaction || 0;
@@ -40,7 +37,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
4037
textarea: {template: base + 'textarea.html', builder: defaults},
4138
fieldset: {template: base + 'fieldset.html', builder: [sfField, simpleTransclusion]},
4239
array: {template: base + 'array.html', builder: [sfField, ngModelOptions, ngModel, array]},
43-
tabarray: {template: base + 'tabarray.html', replace: false},
40+
tabarray: {template: base + 'tabarray.html', builder: [sfField, ngModelOptions, ngModel, array]},
4441
tabs: {template: base + 'tabs.html', replace: false},
4542
section: {template: base + 'section.html', builder: [sfField, simpleTransclusion]},
4643
conditional: {template: base + 'section.html', builder: [sfField, simpleTransclusion]},
@@ -77,10 +74,8 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
7774
var watchFn = function() {
7875
//scope.modelArray = modelArray;
7976
scope.modelArray = scope.$eval(attrs.sfNewArray);
80-
console.warn('array watch!')
8177
// validateField method is exported by schema-validate
8278
if (scope.validateField) {
83-
console.warn('calling validate field');
8479
scope.validateField();
8580
}
8681
};
@@ -110,7 +105,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
110105
} else {
111106
// Otherwise we like to check if the instance of the array has changed, or if something
112107
// has been added/removed.
113-
scope.$watch([attrs.sfNewArray, attrs.sfNewArray + '.length'], function() {
108+
scope.$watchGroup([attrs.sfNewArray, attrs.sfNewArray + '.length'], function() {
114109
watchFn();
115110
onChangeFn();
116111
});
@@ -120,6 +115,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
120115
});
121116

122117
scope.appendToArray = function() {
118+
123119
var empty;
124120

125121
// Same old add empty things to the array hack :(
@@ -139,18 +135,19 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) {
139135
var selection = sfPath.parse(attrs.sfNewArray);
140136
model = [];
141137
sel(selection, scope, model);
142-
if (scope.ngModel) {
143-
scope.ngModel.$setViewValue(model);
144-
}
138+
scope.modelArray = model;
145139
}
146140
model.push(empty);
141+
142+
return model;
147143
};
148144

149145
scope.deleteFromArray = function(index) {
150146
var model = scope.modelArray;
151147
if (model) {
152148
model.splice(index, 1);
153149
}
150+
return model;
154151
};
155152
}
156153
};

‎src/tabarray.html

+23-8
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,22 @@
11

2-
<div sf-array="form" ng-init="selected = { tab: 0 }"
2+
<div ng-init="selected = { tab: 0 }"
3+
ng-model="modelArray" schema-validate="form"
4+
sf-field-model="sf-new-array"
5+
sf-new-array
36
class="clearfix schema-form-tabarray schema-form-tabarray-{{form.tabType || 'left'}} {{form.htmlClass}}">
47
<div ng-if="!form.tabType || form.tabType !== 'right'"
58
ng-class="{'col-xs-3': !form.tabType || form.tabType === 'left'}">
69
<ul class="nav nav-tabs"
710
ng-class="{ 'tabs-left': !form.tabType || form.tabType === 'left'}">
8-
<li ng-repeat="item in modelArray track by $index"
11+
<li sf-field-model="ng-repeat"
12+
ng-repeat="item in $$value$$ track by $index"
913
ng-click="$event.preventDefault() || (selected.tab = $index)"
1014
ng-class="{active: selected.tab === $index}">
1115
<a href="#">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>
1216
</li>
13-
<li ng-hide="form.readonly" ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
17+
<li ng-hide="form.readonly"
18+
ng-disabled="form.schema.maxItems <= modelArray.length"
19+
ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
1420
<a href="#">
1521
<i class="glyphicon glyphicon-plus"></i>
1622
{{ form.add || 'Add'}}
@@ -21,32 +27,41 @@
2127

2228
<div ng-class="{'col-xs-9': !form.tabType || form.tabType === 'left' || form.tabType === 'right'}">
2329
<div class="tab-content {{form.fieldHtmlClass}}">
24-
<div class="tab-pane clearfix"
25-
ng-repeat="item in modelArray track by $index"
30+
<div class="tab-pane clearfix tab{{selected.tab}} index{{$index}}"
31+
sf-field-model="ng-repeat"
32+
ng-repeat="item in $$value$$ track by $index"
2633
ng-show="selected.tab === $index"
2734
ng-class="{active: selected.tab === $index}">
28-
<sf-decorator ng-init="arrayIndex = $index" form="copyWithIndex($index)"></sf-decorator>
2935

36+
<div schema-form-array-items></div>
3037

3138
<button ng-hide="form.readonly"
3239
ng-click="selected.tab = deleteFromArray($index).length - 1"
40+
ng-disabled="form.schema.minItems >= modelArray.length"
3341
type="button"
3442
class="btn {{ form.style.remove || 'btn-default' }} pull-right">
3543
<i class="glyphicon glyphicon-trash"></i>
3644
{{ form.remove || 'Remove'}}
3745
</button>
3846
</div>
47+
<div class="help-block"
48+
ng-show="(hasError() && errorMessage(schemaError())) || form.description"
49+
ng-bind-html="(hasError() && errorMessage(schemaError())) || form.description"></div>
50+
</div>
3951
</div>
4052
</div>
4153

4254
<div ng-if="form.tabType === 'right'" class="col-xs-3">
4355
<ul class="nav nav-tabs tabs-right">
44-
<li ng-repeat="item in modelArray track by $index"
56+
<li sf-field-model="ng-repeat"
57+
ng-repeat="item in $$value$$ track by $index"
4558
ng-click="$event.preventDefault() || (selected.tab = $index)"
4659
ng-class="{active: selected.tab === $index}">
4760
<a href="#">{{interp(form.title,{'$index':$index, value: item}) || $index}}</a>
4861
</li>
49-
<li ng-hide="form.readonly" ng-click="$event.preventDefault() || appendToArray()">
62+
<li ng-hide="form.readonly"
63+
ng-disabled="form.schema.maxItems <= modelArray.length"
64+
ng-click="$event.preventDefault() || (selected.tab = appendToArray().length - 1)">
5065
<a href="#">
5166
<i class="glyphicon glyphicon-plus"></i>
5267
{{ form.add || 'Add'}}

0 commit comments

Comments
 (0)