I've been working on creating a custom directive for Angular that includes a label and select element with necessary classes. This is what my directive code looks like:
return {
restrict: 'E',
scope: {
text: '=',
model: '=',
options: '='
},
template: "<div class='form-group'><label class='control-label'>{{text}}</label><select class='form-control' ng-model='model' ng-options='option.env as option.name for option in options'></select></div>"
And here's how I use it:
<select-input text="'Environment'" options="environments" model="request.Environment"></select-input>
In my controller, the environments are defined as follows:
$scope.environments = [
{ name: 'PROD', env: 'prod' },
{ name: 'N', env: 'n0' },
{ name: 'N1', env:'n1' },
{ name: 'N0', env: 'n2' },
];
However, after Angular transforms the directive into HTML, I noticed that it adds "string:" to the value attribute.
<select class="form-control ng-pristine ng-untouched ng-valid" ng-model="model" ng-options="option.env as option.name for option in options"><option label="PROD" value="string:prod">PROD</option>
<option label="N" value="string:n0">N</option>
<option label="N1" value="string:n1">N1</option>
<option label="N0" value="string:n2" selected="selected">N0</option>
</select>
This behavior has left me puzzled about the presence of "string:" in the value attribute.