Inputting an UUID/GUID into a form's text input using Angular JS

Question

I am creating a form with several input options for the end user, but with one input which I would like to be an UUID/GUID.

Here's what I have so far for the module (project.js):

angular.module('project', ['ngRoute', 'firebase'])

.value('fbURL', 'https://private.firebaseio.com/')

.factory('Projects', function($firebase, fbURL) {
  return $firebase(new Firebase(fbURL));
})

.config(function($routeProvider) {
  $routeProvider
    .when('/', {
      controller:'ListCtrl',
      templateUrl:'list.html'
    })
    .when('/edit/:projectId', {
      controller:'EditCtrl',
      templateUrl:'detail.php'
    })
    .when('/new', {
      controller:'CreateCtrl',
      templateUrl:'detail.php'
    })
    .otherwise({
      redirectTo:'/'
    });
})

.controller('ListCtrl', function($scope, Projects) {
  $scope.projects = Projects;
  $scope.project = { trackid: 'UUID' };
})

.controller('CreateCtrl', function($scope, $location, $timeout, Projects) {
  $scope.project = { trackid: 'UUID' };  
  $scope.save = function() {
    Projects.$add($scope.project, function() {
      $timeout(function() { $location.path('/'); });
    });
  };
})

.controller('EditCtrl',
  function($scope, $location, $routeParams, $firebase, fbURL) {
    var projectUrl = fbURL + $routeParams.projectId;
    $scope.project = $firebase(new Firebase(projectUrl));

  $scope.destroy = function() {
      $scope.project.$remove();
      $location.path('/');
    };

  $scope.save = function() {
      $scope.project.$save();
      $location.path('/');
    };

  $scope.project = { trackid: 'UUID' };
});

And here's what I have for the form input (in my detail.php file):

<form name="myForm">
  <label>Track ID</label>
  <input type="text" name="trackid" ng-model="project.trackid" disabled>

As you can tell, in this example I'm simply inserting the text "UUID" where I would actually like to insert an UUID. I can't however seem to figure out how to insert a function there that would be generating this UUID. Any help would be very much appreciated! Thank you!

what are you asking, how to get a UUID created or simply how to place a function as value that returns a UUID? — charlietfl, Aug 03 '14 at 23:39
@charlietfl I would like to know how to place a function as a value in this situation. I would for example be using something like this: [How to create a GUID / UUID in Javascript?](http://stackoverflow.com/questions/105034/how-to-create-a-guid-uuid-in-javascript/2117523#2117523). Thank you! — André Moraes, Aug 04 '14 at 00:58

charlietfl · Accepted Answer · 2014-08-04T01:09:22.107

0

If you have a function that returns the value needed you can simply do:

function getUUID(){
  var result = /* parse value */
  return result;
}

$scope.project ={ trackid: getUUID() };

DEMO

edited Aug 04 '14 at 01:09

answered Aug 04 '14 at 01:03

charlietfl

170,828
13
121
150

I tried this out on the demo link you have below but I still don't seem to have gotten this right. So, just a few more follow-up questions. 1) Should I have a separate .js file for that getUUID() function, or should I include this in my project.js file (in the example above)? 2) I have edited your code slightly to have 'input' be the area that gets that value. However, wouldn't then all of my input divs on the form get this value? Here's the link: [revised demo](http://jsfiddle.net/QX66y/2/) 3) Could the output to be just the UUID itself? Thanks! – André Moraes Aug 04 '14 at 02:06
can put that function in controller if you want, doesn't have to be bound to `$scope` , or could put it in a service if you want it away from controller – charlietfl Aug 04 '14 at 02:24
thanks for your reply again. Still having some problems though. I have inserted the modified project.js code **[here](http://jsfiddle.net/5L6gB/)**, but am still not able to output it to the 'text' field in the form (also included in the link above). Could you please let me know where I'm going wrong with this. As much of a walkthrough as possible would be appreciated so that I can learn this well. Thank you! – André Moraes Aug 04 '14 at 03:12
you don't make a controller of the function, either put the function in a controller where it will be used or if you need to use it in more than one part of the app put it in a service – charlietfl Aug 04 '14 at 03:15
got it! So, I would like to put it in a service then since I will be using it in all three controllers that I currently have setup. Do you mind showing me how I would do so? I've spent the last two hours reading up on all documentation I could find online about putting functions inside controllers and services, but am still not getting it. I'm just starting to learn, so thanks for your help! – André Moraes Aug 04 '14 at 12:45
suggest you go through tutorial on angular docs site step by step – charlietfl Aug 04 '14 at 12:55
Figured it all out and it works perfectly!! Thank you for your help, @charlietfl! – André Moraes Aug 04 '14 at 13:52

Inputting an UUID/GUID into a form's text input using Angular JS

1 Answers1