adding 'surveyCheckboxes' directive

the surveyCheckboxes directive takes a list of checkbox values and creates a checkbox list that collectively represents one scope object instead of several individual ones
This commit is contained in:
Jared Tabor
2014-10-21 15:45:20 -04:00
parent 5905459fc6
commit 012a83d37f
2 changed files with 66 additions and 82 deletions

View File

@@ -543,7 +543,6 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
checked, min, max, checked, min, max,
survey_url = GetBasePath('job_templates') + id + '/survey_spec/' ; survey_url = GetBasePath('job_templates') + id + '/survey_spec/' ;
function buildHtml(question, index){ function buildHtml(question, index){
question.index = index; question.index = index;
@@ -594,47 +593,26 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
} }
if(question.type === "multiselect"){ if(question.type === "multiselect"){
// question.options = question.choices.split(/\n/); //seperate the choices out into an array
choices = question.choices.split(/\n/); choices = question.choices.split(/\n/);
// element = (question.type==="multiselect") ? "checkbox" : 'radio';
question.default = (question.default) ? question.default : (question.default_multiselect) ? question.default_multiselect : "" ; question.default = (question.default) ? question.default : (question.default_multiselect) ? question.default_multiselect : "" ;
// scope[question.variable].choices = choices; //ensure that the default answers are in an array
// scope[question.variable] = { scope[question.variable] = question.default.split(/\n/);
// options: question.options, //create a new object to be used by the surveyCheckboxes directive
// default: question.default, scope[question.variable + '_object'] = {
// name: 'multi checkboxes', name: question.variable,
// required: true, value: (question.default.split(/\n/)[0]==="") ? [] : question.default.split(/\n/) ,
// value: '' required: question.required,
// } options:[]
// function Ctrl(scope) { };
// scope.field = { //load the options into the 'options' key of the new object
// name:'multi checkboxes', for(j=0; j<choices.length; j++){
// value:'', scope[question.variable+'_object'].options.push( {value:choices[j]} );
// required:true,
// options:[
// {value:'option 1'},
// {value:'option 2'},
// {value:'option 3'}
// ]
// };
// }
// html+='<survey-checkboxes ng-model=" '+question.variable+' " ></survey-checkboxes>' +
// '<div ng-show="job_launch_form.$valid">valid</div>'+
// '<div ng-hide="job_launch_form.$valid">invalid</div>';
html+='<div class="survey_taker_input" > ';
for( j = 0; j<choices.length; j++){
checked = (!Empty(question.default) && question.default.indexOf(choices[j])!==-1) ? "checked" : "";
html+= '<input type="checkbox" class="mc" name="'+question.variable+ ' " id="'+question.variable+'" value=" '+choices[j]+' " '+checked+' >' +
'<span>'+choices[j] +'</span><br>' ;
} }
html+= '<div class="error survey_error" ng-show="job_launch_form.'+ question.variable + '.$dirty && ' + //surveyCheckboxes takes a list of checkboxes and connects them to one scope variable
'job_launch_form.'+question.variable+'.$error.required\">A value is required!</div>'+ html += '<survey-checkboxes name="'+question.variable+'" ng-model=" '+question.variable + '_object " ng-required="'+question.required+'">'+
'<div class=\"error api-error\" ng-bind=\"" + fld + "_api_error\"></div>'; '</survey-checkboxes>{{job_launch_form.'+question.variable+'_object.$error.checkbox}}'+
html+= '</div>'; //end survey_taker_input '<div class="error survey_error" ng-show="job_launch_form.'+question.variable+'.$error.checkbox">A value is required!</div>';
} }
if(question.type === 'integer'){ if(question.type === 'integer'){
@@ -659,11 +637,7 @@ function($location, Wait, GetBasePath, LookUpInit, JobTemplateForm, CredentialLi
} }
} }
scope.someSelected = function (object) {
return Object.keys(object).some(function (key) {
return object[key];
});
};
Rest.setUrl(survey_url); Rest.setUrl(survey_url);

View File

@@ -64,48 +64,58 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job
}) })
// .directive('surveyCheckboxes', function(){ .directive('surveyCheckboxes', function(){
// return { return {
// restrict: 'E', restrict: 'E',
// require: 'ngModel', require: 'ngModel',
// scope: { 'ngModel': '=accessor' }, scope: { ngModel: '=ngModel' },
// template: '<div ng-repeat="option in ngModel().options">' template: '<div class="survey_taker_input" ng-repeat="option in ngModel.options">' +
// +'<label>' '<input type="checkbox" ng-model="cbModel[option.value]" ' +
// +'<input type="checkbox" ng-model="cbModel[option]" ' 'value="{{option.value}}" class="mc" ng-change="update(this.value)" />' +
// +'value="{{option}}" ng-change="update()" ng-required="isRequired()"/>' '<span>'+
// +'{{option}}' '{{option.value}}'+
// +'</label>' '</span>'+
// +'</div>', '</div>',
// link: function(scope, element, attrs, ctrl){ link: function(scope, element, attrs, ctrl){
// scope.cbModel= {}; scope.cbModel= {};
ctrl.$setValidity('reqCheck', true);
angular.forEach(scope.ngModel.value, function(value){
scope.cbModel[value] = true;
// ctrl.$parsers.unshift(function(value){ });
// for (var c in scope.cbModel) {
// if (scope.cbModel[c]) {
// ctrl.$setValidity('checkbox', true);
// }
// }
// ctrl.$setValidity('checkbox', false);
// });
// scope.update = function(){ if(scope.ngModel.required===true && scope.ngModel.value.length===0){
// var val = []; ctrl.$setValidity('reqCheck', false);
// angular.forEach(scope.cbModel, function(v,k){ }
// if (v)
// val.push(k);
// });
// if (val.length>0)
// scope.ngModel().value = angular.toJson(val);
// };
// scope.isRequired = function(){ ctrl.$parsers.unshift(function(){
// if (!scope.ngModel().required) return false; for (var c in scope.cbModel) {
if (scope.cbModel[c]) {
ctrl.$setValidity('checkbox', true);
}
}
ctrl.$setValidity('checkbox', false);
});
// return scope.ngModel().required; scope.update = function(){
// }; var val = [];
// } angular.forEach(scope.cbModel, function(v,k){
// }; if (v)
// }) val.push(k);
});
if (val.length>0){
scope.ngModel.value = val;
scope.$parent[scope.ngModel.name] = val;
ctrl.$setValidity('checkbox', true);
ctrl.$setValidity('reqCheck', true);
}
else if(scope.ngModel.required===true){
ctrl.$setValidity('checkbox' , false);
}
};
}
};
})
// caplitalize Add to any input field where the first letter of each // caplitalize Add to any input field where the first letter of each
// word should be capitalized. Use in place of css test-transform. // word should be capitalized. Use in place of css test-transform.