fixed field directive
This commit is contained in:
parent
8b8aed337e
commit
4bc3cd214a
|
@ -18,7 +18,6 @@ angular.module('forms').directive('fieldDirective', ['$templateCache', '$http',
|
||||||
var templateUrl = 'modules/forms/views/directiveViews/field/';
|
var templateUrl = 'modules/forms/views/directiveViews/field/';
|
||||||
var supported_fields = [
|
var supported_fields = [
|
||||||
'textfield',
|
'textfield',
|
||||||
'welcome_page',
|
|
||||||
'email',
|
'email',
|
||||||
'textarea',
|
'textarea',
|
||||||
'checkbox',
|
'checkbox',
|
||||||
|
@ -66,11 +65,11 @@ angular.module('forms').directive('fieldDirective', ['$templateCache', '$http',
|
||||||
// }
|
// }
|
||||||
|
|
||||||
// GET template content from path
|
// GET template content from path
|
||||||
console.log(scope.field);
|
|
||||||
var template = getTemplateUrl(scope.field);
|
var template = getTemplateUrl(scope.field);
|
||||||
// $http.get(templateUrl).success(function(data) {
|
// $http.get(templateUrl).success(function(data) {
|
||||||
element.html(template);
|
element.html(template).show();
|
||||||
$compile(element.contents())(scope);
|
// console.log(element.contents());
|
||||||
|
$compile(element.contents())(scope);
|
||||||
// });
|
// });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -22,18 +22,18 @@
|
||||||
};
|
};
|
||||||
|
|
||||||
var sampleFields = [
|
var sampleFields = [
|
||||||
{fieldType:'textfield', title:'First Name', fieldValue: 'AoeuName', deletePreserved: false, required: true, disabled: false},
|
{fieldType:'textfield', title:'First Name', fieldValue: 'AoeuName', deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'email', title:'Email', fieldValue: 'aoeu@aoeu.com', deletePreserved: false, required: true, disabled: false},
|
{fieldType:'email', title:'Email', fieldValue: 'aoeu@aoeu.com', deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'yes_no', title:'Do you Play Hockey?', fieldValue: 'true', deletePreserved: false, required: true, disabled: false},
|
{fieldType:'yes_no', title:'Do you Play Hockey?', fieldValue: 'true', deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'checkbox', title:'Receive emails from us', fieldValue: '', deletePreserved: false, required: true, disabled: false},
|
{fieldType:'checkbox', title:'Receive emails from us', fieldValue: '', deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'url', title:'Github Account', fieldValue: 'http://github.com/aoeu', deletePreserved: false, required: true, disabled: false},
|
{fieldType:'url', title:'Github Account', fieldValue: 'http://github.com/aoeu', deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'textarea', title:'Bio', fieldValue: 'This is my bio.', deletePreserved: false, required: true, disabled: false},
|
{fieldType:'textarea', title:'Bio', fieldValue: 'This is my bio.', deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'number', title:'Phone #', fieldValue: '5325325325', deletePreserved: false, required: true, disabled: false},
|
{fieldType:'number', title:'Phone #', fieldValue: 5325325325, deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'legal', title:'You agree to terms and conditions', description:'By selecting \'I agree\' you are agreeing under Canadian law that you have read and accept terms and conditions outlayed below', fieldValue: '', deletePreserved: false, required: true, disabled: false},
|
{fieldType:'legal', title:'You agree to terms and conditions', description:'By selecting \'I agree\' you are agreeing under Canadian law that you have read and accept terms and conditions outlayed below', fieldValue: '', deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'dropdown', title:'Your Sex', fieldValue: 'male', fieldOptions:[ { 'option_id': 0, 'option_title': 'M', 'option_value': 'male' }, { 'option_id': 1, 'option_title': 'F', 'option_value': 'female' }], deletePreserved: false, required: true, disabled: false},
|
{fieldType:'dropdown', title:'Your Sex', fieldValue: 'male', fieldOptions:[ { 'option_id': 0, 'option_title': 'M', 'option_value': 'male' }, { 'option_id': 1, 'option_title': 'F', 'option_value': 'female' }], deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'radio', title:'Your Sexual Orientation', fieldValue: 'hetero', fieldOptions:[ { 'option_id': 0, 'option_title': 'Heterosexual', 'option_value': 'hetero' }, { 'option_id': 1, 'option_title': 'Homosexual', 'option_value': 'homo' }, { 'option_id': 2, 'option_title': 'Bisexual', 'option_value': 'bi' }, { 'option_id': 3, 'option_title': 'Asexual', 'option_value': 'asex' }], deletePreserved: false, required: true, disabled: false},
|
{fieldType:'radio', title:'Your Sexual Orientation', fieldValue: 'hetero', fieldOptions:[ { 'option_id': 0, 'option_title': 'Heterosexual', 'option_value': 'hetero' }, { 'option_id': 1, 'option_title': 'Homosexual', 'option_value': 'homo' }, { 'option_id': 2, 'option_title': 'Bisexual', 'option_value': 'bi' }, { 'option_id': 3, 'option_title': 'Asexual', 'option_value': 'asex' }], deletePreserved: false, required: true, disabled: false},
|
||||||
{fieldType:'rating', title:'Your Current Happiness', fieldValue: '0', deletePreserved: false, required: true, disabled: false},
|
{fieldType:'rating', title:'Your Current Happiness', fieldValue: '0', deletePreserved: false, required: true, disabled: false},
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
// The $resource service augments the response object with methods for updating and deleting the resource.
|
// The $resource service augments the response object with methods for updating and deleting the resource.
|
||||||
|
@ -71,13 +71,22 @@
|
||||||
it('should be able to render all field types in html', inject(function($rootScope) {
|
it('should be able to render all field types in html', inject(function($rootScope) {
|
||||||
scope.fields = sampleFields;
|
scope.fields = sampleFields;
|
||||||
|
|
||||||
for(var field in sampleFields){
|
for(var i=0; i<sampleFields.length; i++){
|
||||||
|
var field = sampleFields[i];
|
||||||
|
if(!field.title) field.title = '';
|
||||||
|
|
||||||
scope.myfield = field;
|
scope.myfield = field;
|
||||||
var element = angular.element('<field-directive field="myfield"></field-directive>');
|
var element = angular.element('<field-directive field="myfield"></field-directive>');
|
||||||
$compile(element)(scope);
|
$compile(element)(scope);
|
||||||
scope.$digest();
|
scope.$digest();
|
||||||
|
|
||||||
expect(element.html()).not.toEqual('<div>'+field.title+'</div>');
|
console.log('Actual: ');
|
||||||
|
console.log(element.html());
|
||||||
|
|
||||||
|
console.log('\nExpected: ');
|
||||||
|
|
||||||
|
console.log('<div class="ng-binding ng-scope>'+field.title+'</div>');
|
||||||
|
expect(element.html()).not.toEqual('<div class="ng-binding ng-scope>'+field.title+'</div>');
|
||||||
}
|
}
|
||||||
}));
|
}));
|
||||||
});
|
});
|
||||||
|
|
|
@ -6,12 +6,12 @@
|
||||||
<label class="btn btn-info col-xs-3">
|
<label class="btn btn-info col-xs-3">
|
||||||
<input ng-focus="setActiveField(field._id)"
|
<input ng-focus="setActiveField(field._id)"
|
||||||
type="checkbox"
|
type="checkbox"
|
||||||
value="{{option.option_value}}"
|
value="{{option.option_id}}"
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
ng-model-options="{ debounce: 250 }"
|
ng-model-options="{ debounce: 250 }"
|
||||||
ng-required="field.required"
|
ng-required="field.required"
|
||||||
ng-disabled="field.disabled"
|
ng-disabled="field.disabled"
|
||||||
ng-init="field.fieldValue = field.fieldOptions[0].option_value"/>
|
ng-init="field.fieldValue = field.fieldOptions[0].option_id"/>
|
||||||
<span ng-bind="option.option_title"></span>
|
<span ng-bind="option.option_title"></span>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -7,10 +7,13 @@
|
||||||
</h3>
|
</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-xs-12 field-input ">
|
<div class="col-xs-12 field-input ">
|
||||||
<select ng-model="field.fieldValue" ng-model-options="{ debounce: 250 }" ng-required="field.required" ng-disabled="field.disabled">
|
<select ng-model="field.fieldValue"
|
||||||
|
ng-model-options="{ debounce: 250 }"
|
||||||
|
ng-required="field.required"
|
||||||
|
ng-disabled="field.disabled">
|
||||||
<option ng-repeat="option in field.fieldOptions"
|
<option ng-repeat="option in field.fieldOptions"
|
||||||
ng-selected="option.option_value == field.fieldValue"
|
ng-selected="option.option_id == field.fieldValue"
|
||||||
value="{{option.option_id}}">
|
ng-value="option.option_id">
|
||||||
{{option.option_title}}
|
{{option.option_title}}
|
||||||
</option>
|
</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
|
@ -2,10 +2,10 @@
|
||||||
<div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
|
<div class="col-xs-12 field-title"><h3><span class="fa fa-angle-double-right"></span> {{field.title}} <span class="required-error" ng-show="field.required && !field.fieldValue">*(required)</span></h3></div>
|
||||||
<div class="col-xs-12 field-input">
|
<div class="col-xs-12 field-input">
|
||||||
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
|
<div ng-repeat="option in field.fieldOptions" class="row-fluid">
|
||||||
<label class="btn col-xs-3" ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_value}">
|
<label class="btn col-xs-3" ng-class="{activeBtn: field.fieldValue == field.fieldOptions[$index].option_id}">
|
||||||
<input ng-focus="setActiveField(field._id)"
|
<input ng-focus="setActiveField(field._id)"
|
||||||
type="radio"
|
type="radio"
|
||||||
value="{{option.option_value}}"
|
value="{{option.option_id}}"
|
||||||
ng-model="field.fieldValue"
|
ng-model="field.fieldValue"
|
||||||
ng-model-options="{ debounce: 250 }"
|
ng-model-options="{ debounce: 250 }"
|
||||||
ng-required="field.required"
|
ng-required="field.required"
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<form name="myForm" class="submission-form col-sm-12 col-md-offset-1 col-md-10">
|
<form name="myForm" class="submission-form col-sm-12 col-md-offset-1 col-md-10">
|
||||||
<div ng-repeat="field in myform.form_fields" ng-if="!field.deletePreserved" ng-class="{activeField: selected == field._id }" class="row field-directive">
|
<div ng-repeat="field in myform.form_fields" ng-if="!field.deletePreserved" ng-class="{activeField: selected == field._id }" class="row field-directive">
|
||||||
<field-directive field="field" >
|
<field-directive field="field">
|
||||||
</field-directive>
|
</field-directive>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
|
|
Loading…
Reference in a new issue