I created directive form controls (tesxt, select, radio). In directive I am passing a value that I want access in directive function and if this value is not set or empty then set default value from question (data._pageAttributes.defaultValue)
HTML
<div ng-repeat="que in questions[$state.current.name]">
<div ng-if="que.QuestionData._fieldType === 'text'" >
<!-- {{answers[que.QuestionData._attributeName]}} -->
<text-control-dir data="que.QuestionData" default="94403"></text-control-dir>
</div>
<div ng-if="que.QuestionData._fieldType === 'select'" >
<select-control-dir data="que.QuestionData" default="2016"></select-control-dir>
</div>
<div ng-if="que.QuestionData._fieldType === 'radio'" >
<radio-control-dir data="que.QuestionData"></radio-control-dir>
</div>
<div ng-if="que.QuestionData._fieldType === 'hidden' && que.QuestionData._attributeName != 'CBQ'" >
<hidden-control-dir data="que.QuestionData"></hidden-control-dir>
</div>
</div>
controlDirective.js
(function () {
"use strict";
angular
.module("autoQuote")
.directive('textControlDir', [textControlDir])
.directive('selectControlDir', [selectControlDir])
.directive('radioControlDir', [radioControlDir])
.directive('hiddenControlDir', [hiddenControlDir]);
function textControlDir()
{
return {
transclude: true,
restrict: 'E',
scope: {
data: '=data',
default: '=default'
},
template: "<div ng-transclude></div><label>{{data._text}} </label><input ng-model='answer.PC' type='text' name='{{data._attributeName}}' id='{{data._attributeName}}' value='' >"
,
link: function (scope, element, attrs)
{
console.log('default');
console.log(attrs.default);
if(attrs.default == '')
{
attrs.default = data._pageAttributes.defaultValue;
}
}
};
}
function selectControlDir()
{
return {
transclude: true,
restrict: 'E',
scope: {
data: '=data'
},
template: "<div ng-transclude></div><label>{{data._text}} </label><select type='text' name='{{data._attributeName}}' id='{{data._attributeName}}' >\n\
<option ng-repeat='ans in data._answerOptions'>{{ans._promptText}}</option></select>"
,
link: function (scope, element, attrs)
{
//console.log("scope.data.QuestionData", scope.data.QuestionData);
}
};
}
function radioControlDir()
{
return {
transclude: true,
restrict: 'E',
scope: {
data: '=data'
},
template: "<div ng-transclude></div><label>{{data._text}} </label><input type='radio' name='{{data._attributeName}}' id='{{data._attributeName}}' value='Yes' >\n\
\n\
<input type='radio' name='{{data._attributeName}}' id='{{data._attributeName}}' value='No' >\n\
"
,
link: function (scope, element, attrs)
{
//console.log("scope.data.QuestionData", scope.data.QuestionData);
}
};
}
function hiddenControlDir()
{
return {
transclude: true,
restrict: 'E',
scope: {
data: '=data'
},
template: "<div ng-transclude></div><label>{{data._text}} </label><input type='hidden' name='{{data._attributeName}}' id='{{data._attributeName}}' value='' >"
,
link: function (scope, element, attrs)
{
//console.log(scope.data);
}
};
}
}());
CA.js file has all question and default value that we are looping for form questions.
In directive I want to write operation to check whether value passed in default attribute or not. if no then get value from question.que and set selected in input and select control.
link: function (scope, element, attrs)
{
if(attrs.default == '')
{
attrs.default = data._pageAttributes.defaultValue;
}
}
but this is not working for me. Here I have set default value hardcoded for text(Zip code)94403 and for Vehicle year 2016
For zip code : 94403 should be filled in input box and if not this is blank then 35004 (from CA.json)
If you don't set the default it will be undefined
not an empty string
link: function (scope, element, attrs)
{
if(attrs.default)
{
attrs.default = scope.data._pageAttributes.defaultValue;
}
}
It will check both empty
and undefined
.
You could use an ng-model instead of default and set the value of the ng-model in your controller if the data corresponding to the HTML element is changed trhe ng-model will change automatically.
http://jsfiddle.net/halirgb/Lvc0u55v/
<input ng-model="example">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.