Keeping Angularjs HTML Green

Question

When I add ng-options to a select element, I get options that look like this:

<select name="folderId" data-ng-model="message.folderId" data-ng-options="folder.id as folder.name for folder in folders">

<option value="" class="">No Folder</option>
<option label="Bulk" value="string:0fedcc77-4cc5-4a9a-ba2f-847f8581d4d7" selected="selected">Bulk</option>
<option label="Auto Responder" value="string:d0898116-88ce-4e25-8d91-b17a7a29adc1">Auto Responder</option>
<option label="Customer Service" value="string:6ec044c1-c378-42de-82ad-f3dc63c58f00">Customer Service</option>

</select>

The problem with the above is that Angular is adding string: in front of the folder ID. This form is submitting data to a remote page when clicked. However, the string: is turning a valid guid into an invalid guid. would it be possible to instruct Angularjs to not add extra information to the value attribute?

Thanks.

Answer 1

Try change to this

<select name="folderId" data-ng-options="folder.id as folder.name for folder in folders track by folder.id">

var app = angular.module('app', []);
app.controller('FirstCtrl', function($scope) {
  $scope.folders = [{
    "name": "A",
    "id": "12"
  }, {
    "name": "B",
    "id": "15"
  }, {
    "name": "C",
    "id": "13"
  }];
  $scope.folder = $scope.folders[0];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="FirstCtrl as vm">
  <form name="form">
    <select name="folderId" ng-model="folder" data-ng-options="folder as folder.name for folder in folders track by folder.id"></select>
  </form>
</div>