CODEWITHSUNDEEP
javascriptajaxangularjslaravellaravel-blade
Dylan Buth
Dylan Buth

Reputation: 1666

Use of undefined constant with angular

I am attempting to have a random first and last name generated based on gender and filled into a form. I'm using angular $http and am pretty new to angular in general. I get this error every time I load the 

 Use of undefined constant firstName - assumed 'firstName'

My View:

 @section('content')
 <form ng-app="getNameApp" ng-controller="getNameController">

   Male<input type="radio" ng-model="gender" value="male" name="gender" /><br />
   Female<input type="radio" ng-model="gender" value="female" name="gender" /><br />

   <input type="text" ng-model="{{ firstName }}" name="firstName" />
   <input type="text" ng-if="{{ lastName }}" value="{{ lastName.body }}" name="lastName" />

   <button ng-click="randomNameController()">Randomize</button>
</form>
@stop

My JS

angular.module('getNameApp', [])
.controller('getNameController', getNameController);

function getNameController ($scope, $http) {
   $scope.gender = 'male';

   var randomName = $http({
       url: '/randomName',
       method: "GET",
       params: {gender: $scope.gender}
   });

   randomName.success(function(data) {
       $scope.firstName = data.firstName;
       $scope.lastName = data.lastName;
   });
   randomName.error(function() {
       document.write(randomName);
   });

}

My Controller

 public function randomName () {
    $faker = Faker\Factory::create();
    $gender = Input::get('gender');

    if ($gender == 'male') {
        $names = [
            'firstName' => $faker->firstNameMale
        ];
    } else {
        $names = [
            'firstName' => $faker->firstNameFemale
        ];
    }
    $names['lastName'] = $faker->lastName;
    return $names;
}

edit: I checked the network tab of inspect element and it says 500 internal server error with createCharacter. (route to page)

Upvotes: 0

Views: 2151

Answers (2)

Dylan Buth
Dylan Buth

Reputation: 1666

So it looks like the direct answer to this question is, no brackets on ng-model="". That being said, I had lots of problems in my code and the working version of it is below. Hopefully it helps someone having similar problems. I know it's not the cleanest.

This code creates a form with a randomly generated name based on gender. you can select a gender and hit randomize to fill a different name. I am using the https://github.com/fzaninotto/Faker library to generate a name.

View:

 <form ng-app="getNameApp" ng-controller="getNameController">

  Male<input type="radio" ng-model="gender" value="male" name="gender" /><br />
  Female<input type="radio" ng-model="gender" value="female" name="gender" /><br />

  <input type="text" ng-model="firstName" name="firstName" />
  <input type="text" ng-model="lastName" name="lastName" />

  <button ng-click="generate(gender)">Randomize</button>
</form>

JS: 

 angular.module('getNameApp', []).controller('getNameController', getNameController);

function getNameController ($scope, $http) { $scope.gender = 'male';

$scope.generate = function (gender) {
    var randomName = $http({
        url: '/randomName',
        method: "GET",
        params: {gender: gender}
    });

    randomName.success(function (data) {
        var names = {
            firstName: data.firstName,
            lastName: data.lastName
        };
        $scope.firstName = names.firstName;
        $scope.lastName = names.lastName;

    });
    randomName.error(function () {
        document.write(randomName);
    });
    return $scope;

};

   $scope.generate($scope.gender);
}

Controller:

public function randomName () {
    $faker = Faker\Factory::create();
    $gender = Input::get('gender');

    if ($gender == 'male') {
        $names = [
            'firstName' => $faker->firstNameMale
        ];
    } else if ($gender == 'female') {
        $names = [
            'firstName' => $faker->firstNameFemale
        ];
    }
    $names['lastName'] = $faker->lastName;
    return $names;
}

Upvotes: 1

PSL
PSL

Reputation: 123739

I am not seen that kind of error, however you have an issue, you are trying to get the firstName from promise

randomName.success(function() {
     $scope.firstName = randomName.firstName; //<-- Here randomName is a promise not data
     $scope.lastName = randomName.lastName;
  });

Instead get the data which comes as the first argument of the success callback, 

 randomName.success(function(data) {
     $scope.firstName = data.firstName; 
     $scope.lastName = data.lastName;
  });

Upvotes: 1

Related Questions