Skip to content

Commit 317cba5

Browse files
nicklasbnicklasb
committed
Work around change in angular 1.3 that caused filters not to work
Fixed bug where filter destination selection would be empty Change implementation of UI-select, make more things wirk Make the example filter value more complex
1 parent abf92f7 commit 317cba5

8 files changed

+124
-92
lines changed

‎angular-schema-form-dynamic-select.js

Lines changed: 47 additions & 33 deletions
Large diffs are not rendered by default.

‎angular-schema-form-dynamic-select.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app.js

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -118,16 +118,16 @@ testApp.controller('appController', ['$scope', '$http', function ($scope, $http)
118118
description: 'This data is asynchrously loaded using a async call. ' +
119119
'(specify options.async.call)'
120120
},
121-
121+
122122
"priorities": {
123123
"type": "object",
124124
"description": 'Complex array in list',
125125
"properties": {
126126
"priority": {
127127
"type": "array",
128128
"items": {
129-
"type": "object",
130-
"properties": {
129+
"type": "object",
130+
"properties": {
131131
"value": {
132132
"type": "string",
133133
"enum": [ "DOG", "CAT", "FISH" ]
@@ -154,33 +154,34 @@ testApp.controller('appController', ['$scope', '$http', function ($scope, $http)
154154
"options": {
155155
"multiple": "true",
156156
"filterTriggers": ["model.select"],
157-
"filter": "model.select==item.category"
157+
"filter": "item.category.indexOf(model.select) > -1"
158158
},
159159
"validationMessage": "Hey, you can only select three items or you'll see this!",
160160
"titleMap": [
161161
{"value": 'value1', "name": 'text1', "category": "value1"},
162162
{"value": 'value2', "name": 'text2', "category": "value1"},
163-
{"value": 'value3', "name": 'long very very long label3', "category": "value2"},
163+
{"value": 'value3', "name": 'long very very long label3', "category": ["value2", "value1"]},
164164
{"value": 'value4', "name": 'Select three and get a validation error!', "category": "value1"}
165165
]
166166
},
167167
{
168168
"key": 'uiselect',
169169
"type": 'uiselect',
170-
"titleMap": [
171-
{ value: 'one', name: 'option one'},
172-
{ value: 'two', name: 'option two'},
173-
{ value: 'three', name: 'option three'}
174-
]
170+
"placeholder": "not set yet..",
171+
"options": {
172+
"callback": "callBackSD"
173+
}
175174
},
176175
{
177176
"key": 'uiselectmultiple',
178177
"type": 'uiselectmultiple',
179-
"options": {
180-
"httpGet": {
181-
"url": "test/testdata.json"
182-
}
183-
}
178+
"placeholder": "not set yet..",
179+
"titleMap": [
180+
{"value": 'value1', "name": 'text1', "category": "value1"},
181+
{"value": 'value2', "name": 'text2', "category": "value1"},
182+
{"value": 'value3', "name": 'long very very long label3', "category": "value2"},
183+
{"value": 'value4', "name": 'Select three and get a validation error!', "category": "value1"}
184+
]
184185
},
185186

186187
{
@@ -228,6 +229,7 @@ testApp.controller('appController', ['$scope', '$http', function ($scope, $http)
228229
{
229230
"key": "multiselectDynamicHttpGetMapped",
230231
"type": 'strapselect',
232+
"placeholder": "And even less here...",
231233
"options": {
232234
"multiple" : "true",
233235
"httpGet": {
@@ -268,12 +270,14 @@ testApp.controller('appController', ['$scope', '$http', function ($scope, $http)
268270
$scope.model = {};
269271
$scope.model.select = 'value1';
270272
$scope.model.multiselect = ['value2', 'value1'];
273+
$scope.model.uiselect = "text1";
274+
$scope.model.uiselectmultiple = ['value1'];
271275
$scope.model.multiselectDynamicHttpPost = null;
272276
$scope.model.multiselectDynamicHttpGetMapped = [];
273277
$scope.model.multiselectDynamicAsync = [];
274278
$scope.model.multiselectDynamicHttpGet = [];
275279
$scope.model.multiselectDynamic = [];
276-
280+
277281
$scope.model.priorities = {
278282
"priority": [
279283
{
@@ -287,7 +291,7 @@ testApp.controller('appController', ['$scope', '$http', function ($scope, $http)
287291
}
288292
]
289293
};
290-
294+
291295
$scope.submitted = function (form) {
292296
$scope.$broadcast('schemaFormValidate');
293297
console.log($scope.model);

‎src/angular-schema-form-dynamic-select.js

Lines changed: 43 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -81,22 +81,22 @@ angular.module('schemaForm').config(
8181
list = [];
8282
sfSelect($scope.$parent.form.key, $scope.$parent.model, list);
8383
}
84-
$scope.$parent.$watch('form.select_models',function(){
85-
if (!($scope.$parent.form.select_models)) {
86-
// The select models has not yet been assigned. Do nothing.
84+
$scope.$parent.$watch('form.selectedOptions',function(){
85+
if (!($scope.$parent.form.selectedOptions)) {
86+
8787
} else
88-
if($scope.$parent.form.select_models.length == 0) {
89-
$scope.$parent.insideModel = $scope.$parent.$$value$$;
88+
if($scope.$parent.form.selectedOptions.length == 0) {
89+
9090
if($scope.$parent.ngModel.$viewValue != undefined) {
91-
$scope.$parent.ngModel.$setViewValue($scope.$parent.form.select_models);
91+
$scope.$parent.ngModel.$setViewValue($scope.$parent.form.selectedOptions);
9292
}
9393
} else {
94-
$scope.$parent.insideModel = []
95-
$scope.$parent.form.select_models.forEach(function (item){
96-
$scope.$parent.insideModel.push(item.value);
94+
$scope.$parent.$$value$$ = [];
95+
$scope.$parent.form.selectedOptions.forEach(function (item){
96+
$scope.$parent.$$value$$.push(item.value);
9797
}
9898
);
99-
$scope.$parent.ngModel.$setViewValue($scope.$parent.insideModel);
99+
$scope.$parent.ngModel.$setViewValue($scope.$parent.$$value$$);
100100
}
101101
}, true);
102102
}]
@@ -127,7 +127,7 @@ angular.module('schemaForm').config(
127127
return function(items, key, values) {
128128
var out = [];
129129

130-
if (angular.isArray(values)) {
130+
if (angular.isArray(values) && items !== undefined) {
131131
values.forEach(function (value) {
132132
for (var i = 0; i < items.length; i++) {
133133
if (value == items[i][key]) {
@@ -182,20 +182,18 @@ angular.module('schemaForm').config(
182182
angular.module('schemaForm').controller('dynamicSelectController', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
183183

184184

185-
$scope.triggerItems = function () {
185+
$scope.triggerTitleMap = function () {
186186
console.log("listener triggered");
187-
$scope.$$watchers.forEach(function (watcher) {
188-
if (watcher.exp == "form.titleMap") {
189-
watcher.fn($scope.form.titleMap, $scope.form.titleMap)
190-
}
191-
});
187+
// Ugly workaround to trigger titleMap expression re-evaluation so that the selectFilter it reapplied.
188+
$scope.form.titleMap.push({"value": "345890u340598u3405u9", "name": "34095u3p4ouij"})
189+
$timeout(function () { $scope.form.titleMap.pop() })
192190

193191
};
194192

195193
$scope.initFiltering = function (localModel) {
196194
if ($scope.form.options.filterTriggers) {
197195
$scope.form.options.filterTriggers.forEach(function (trigger) {
198-
$scope.$watch(trigger, $scope.triggerItems)
196+
$scope.$parent.$watch(trigger, $scope.triggerTitleMap)
199197

200198
});
201199
}
@@ -274,7 +272,11 @@ angular.module('schemaForm').controller('dynamicSelectController', ['$scope', '$
274272
}
275273
};
276274

277-
$scope.fetchResult = function (form) {
275+
$scope.test = function (form) {
276+
form.titleMap.pop();
277+
};
278+
279+
$scope.populateTitleMap = function (form) {
278280

279281
if ("enum" in form.schema) {
280282
form.titleMap = [];
@@ -284,11 +286,11 @@ angular.module('schemaForm').controller('dynamicSelectController', ['$scope', '$
284286
);
285287

286288
} else if (form.titleMap) {
287-
console.log("dynamicSelectController.fetchResult : There is already a titleMap");
289+
console.log("dynamicSelectController.populateTitleMap(key:" + form.key + ") : There is already a titleMap");
288290
}
289291
else if (!form.options) {
290292

291-
console.log("dynamicSelectController.fetchResult : No options set, needed for dynamic selects");
293+
console.log("dynamicSelectController.populateTitleMap(key:" + form.key + ") : No options set, needed for dynamic selects");
292294
}
293295
else if (form.options.callback) {
294296
form.titleMap = $scope.getCallback(form.options.callback)(form.options);
@@ -330,12 +332,29 @@ angular.module('schemaForm').controller('dynamicSelectController', ['$scope', '$
330332
alert("Loading select items failed (URL: '" + String(finalOptions.httpGet.url) +
331333
"\nError: " + status);
332334
});
333-
334335
}
335-
336336
};
337+
$scope.uiMultiSelectInitInternalModel = function(_model)
338+
{
339+
function find_in_titleMap(value) {
340+
for (i = 0; i < $scope.form.titleMap.length; i++) {
341+
if ($scope.form.titleMap[i].value == value) {
342+
return $scope.form.titleMap[i].name
343+
}
344+
}
337345

338346

347+
}
348+
$scope.internalModel = [];
349+
if (_model !== undefined && angular.isArray(_model)){
350+
_model.forEach(function (value) {
351+
$scope.internalModel.push({"value": value, "name": find_in_titleMap(value) })
352+
}
353+
354+
)
355+
}
356+
}
357+
339358
}]);
340359

341360
angular.module('schemaForm').filter('selectFilter', [function ($filter) {
@@ -368,7 +387,7 @@ angular.module('schemaForm').filter('selectFilter', [function ($filter) {
368387
else if (localModel) {
369388
// If not in list, also remove the set value
370389

371-
if (controller.localModelType == "[object Array]") {
390+
if (controller.localModelType == "[object Array]" && localModel.indexOf(curr_item.value) > -1) {
372391
localModel.splice(localModel.indexOf(curr_item.value), 1);
373392
}
374393
else if (localModel == curr_item.value) {
@@ -393,8 +412,3 @@ angular.module('schemaForm').filter('selectFilter', [function ($filter) {
393412
return data;
394413
};
395414
}]);
396-
397-
398-
399-
400-

‎src/strapmultiselect.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
33
<label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">{{form.title}}</label>
44

5-
<div class="form-group {{form.fieldHtmlClass}}" ng-init="fetchResult(form)">
5+
<div class="form-group {{form.fieldHtmlClass}}" ng-init="populateTitleMap(form)">
66
<button type="button" class="btn btn-default" sf-changed="form" schema-validate="form" ng-model="$$value$$"
77
data-placeholder="{{form.placeholder || form.schema.placeholder || ('placeholders.select')}}"
88
data-html="1"

‎src/strapselect.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
ng-class="{'has-error': hasError(), 'has-success': hasSuccess()}">
33
<label class="control-label {{form.labelHtmlClass}}" ng-show="showTitle()">{{form.title}}</label>
44

5-
<div class="form-group {{form.fieldHtmlClass}}" ng-init="fetchResult(form)">
5+
<div class="form-group {{form.fieldHtmlClass}}" ng-init="populateTitleMap(form)">
66
<button ng-if="(form.options.multiple == 'true') || (form.options.multiple == true)"
77
type="button" class="btn btn-default" sf-changed="form" schema-validate="form" ng-model="$$value$$"
88
data-placeholder="{{form.placeholder || form.schema.placeholder || ('placeholders.select')}}"

‎src/uiselect.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<div class="form-group"
22
ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
3+
ng-init="selectedOptions=form.titleMap; insideModel=$$value$$;">
34
<label class="control-label" ng-show="showTitle()">{{form.title}}</label>
45

5-
<div class="form-group" ng-init="select_model.selected=select_models[0]">
6+
<div class="form-group" ng-init="select_model.selected=selectedOptions[0]">
67
<ui-select ng-controller="dynamicSelectController" ng-model="select_model.selected"
78
ng-if="!(form.options.tagging||false)" theme="bootstrap" ng-disabled="form.disabled"
89
on-select="$$value$$=$item.value" class="{{form.options.uiClass}}">
910
<ui-select-match
1011
placeholder="{{form.placeholder || form.schema.placeholder || ('placeholders.select' | translate)}}">
1112
{{select_model.selected.name}}
1213
</ui-select-match>
13-
<ui-select-choices refresh="fetchResult(form, form.options, $select.search)"
14+
<ui-select-choices refresh="populateTitleMap(form, form.options, $select.search)"
1415
refresh-delay="form.options.refreshDelay" group-by="form.options.groupBy"
1516
repeat="item in form.titleMap | propsFilter: {name: $select.search, description: (form.options.searchDescriptions===true ? $select.search : 'NOTSEARCHINGFORTHIS') }">
1617
<div ng-bind-html="item.name | highlight: $select.search"></div>
@@ -31,7 +32,7 @@
3132
<small>{{(select_model.selected.isTag===true ? form.options.taggingLabel : '')}}</small>
3233
</ui-select-match>
3334
<!--repeat code because tagging does not display properly under group by but is still useful -->
34-
<ui-select-choices refresh="fetchResult(form, form.options, $select.search)"
35+
<ui-select-choices refresh="populateTitleMap(form, form.options, $select.search)"
3536
refresh-delay="form.options.refreshDelay"
3637
repeat="item in form.titleMap | propsFilter: {name: $select.search, description: (form.options.searchDescription===true ? $select.search : 'NOTSEARCHINGFORTHIS') }">
3738
<div ng-if="item.isTag"
@@ -57,11 +58,11 @@
5758
<small>{{(select_model.selected.isTag===true ? form.options.taggingLabel : '')}}</small>
5859
</ui-select-match>
5960
<ui-select-choices group-by="form.options.groupBy"
60-
refresh="fetchResult(form, form.options, $select.search)"
61+
refresh="populateTitleMap(form, form.options, $select.search)"
6162
refresh-delay="form.options.refreshDelay"
6263
repeat="item in form.titleMap | propsFilter: {name: $select.search, description: (form.options.searchDescription===true ? $select.search : 'NOTSEARCHINGFORTHIS') }">
6364
<div ng-if="item.isTag"
64-
ng-bind-html="'<div>' + (item.name | highlight: $select.search) + ' ' + form.options.taggingLabel + '</div><div class=&quot;divider&quot;></div>'"></div>
65+
ng-bind-html="'<div>' + (item.name | highlight: $select.search) + ' ' + form.options.taggingLabel + '</div><div class=&quot;divider&quot;></div>'"></div>
6566
<div ng-if="!item.isTag" ng-bind-html="item.name + item.isTag| highlight: $select.search"></div>
6667
<div ng-if="item.description">
6768
<span ng-bind-html="'<small>' + (''+item.description | highlight: (form.options.searchDescriptions===true ? $select.search : 'NOTSEARCHINGFORTHIS')) + '</small>'"></span>

‎src/uiselectmultiple.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11

22
<div class="form-group" ng-class="{'has-error': hasError(), 'has-success': hasSuccess(), 'has-feedback': form.feedback !== false}"
3-
ng-controller="dynamicSelectController">
3+
ng-controller="dynamicSelectController" ng-init="uiMultiSelectInitInternalModel($$value$$)">
44
<label class="control-label" ng-show="showTitle()">{{form.title}}</label>
5-
<div class="form-group" ng-init="form.select_models=(form.titleMap| whereMulti : 'value' : ($$value$$||[]))">
6-
<ui-select multiple sortable-options="{{form.sortableOptions}}" ng-model="form.select_models" theme="bootstrap"
5+
<div class="form-group">
6+
<ui-select multiple sortable-options="{{form.sortableOptions}}" ng-model="internalModel" theme="bootstrap"
77
on-select="$$value$$.push($item.value)" on-remove="$$value$$.splice($$value$$.indexOf($item.value), 1)"
88
class="{{form.options.uiClass}}">
99
<ui-select-match placeholder="{{form.placeholder || form.schema.placeholder || ('placeholders.select' | translate)}}">{{$item.name}}</ui-select-match>
1010
<ui-select-choices repeat="item in form.titleMap | propsFilter: {name: $select.search}"
11-
refresh="fetchResult(form, $select.search)"
11+
refresh="populateTitleMap(form, $select.search)"
1212
refresh-delay="form.options.refreshDelay">
1313
<div ng-bind-html="item.name | highlight: $select.search"></div>
1414
</ui-select-choices>
1515
</ui-select>
16-
<input toggle-model type="hidden" ng-model="insideModel" sf-changed="form" schema-validate="form" />
1716
<span ng-if="form.feedback !== false"
1817
class="form-control-feedback"
1918
ng-class="evalInScope(form.feedback) || {'glyphicon': true, 'glyphicon-ok': hasSuccess(), 'glyphicon-remove': hasError() }"></span>

0 commit comments

Comments
 (0)