Function treated as string in Angular JS

Question

I have an html form that takes a name and a location and Posts it to a mobile service table.

<form name="userform" ng-submit="addName(user)">
<p>name:     <input type="text" id="name" ng-model="user.name" /></p>
<p>location: <input type="text" id="location" ng-model="user.location"/></p>
<button id="btn-add-evangelist">Add to list</button>
</form>

and this is how I retrieve data from the form in Angular

$scope.people = [];
$scope._name     = "Default Name";
$scope._location = "Default Location";
$scope.user = {
  name: function (theName) {
      if (angular.isDefined(theName)) {
          $scope._name = theName;
      }
      return $scope._name;
  },
  location: function (theLocation) {
      if (angular.isDefined(theLocation)) {
          $scope._location = theLocation;
      }
      return $scope._location;
  }};

however, when I run the html, the location textbox has the function code instead of the "Default Location" string, and the name textbox is blank instead of "Default Name".

I wonder what can be wrong here. Any help is appreciated.

31piy · Accepted Answer · 2017-11-02 10:30:41Z

3

AngularJS works correct. It basically takes the string representation of the function, and sets it as the value of the textbox.

If you need the evaluated value instead, you need to call the function by putting a parentheses after the function name, like this:

angular.module('myapp', [])
  .controller('myctrl', function($scope) {
    $scope.people = [];
    $scope._name = "Default Name";
    $scope._location = "Default Location";
    $scope.user = {
      name: function(theName) {
        if (angular.isDefined(theName)) {
          $scope._name = theName;
        }
        return $scope._name;
      }(),
      location: function(theLocation) {
        if (angular.isDefined(theLocation)) {
          $scope._location = theLocation;
        }
        return $scope._location;
      }()
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="myapp" ng-controller="myctrl">
  <form name="userform" ng-submit="addName(user)">
    <p>name: <input type="text" id="name" ng-model="user.name" /></p>
    <p>location: <input type="text" id="location" ng-model="user.location" /></p>
    <button id="btn-add-evangelist">Add to list</button>
  </form>
</div>

answered Nov 2, 2017 at 10:30

31piy

23.9k6 gold badges51 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

phuwin Over a year ago

In your answer, it's still user.name and user.location but not user.name() or user.location()

31piy Over a year ago

@PhuNguyen -- Try with user.name() in the HTML. You would receive an error, because the model will not be settable then.

phuwin Over a year ago

Ah, didn't see that () part after the function declaration

phuwin · Accepted Answer · 2017-11-02 10:32:43Z

1

You can set directly the default value to the model like this:

$scope.people = [];
$scope._name     = "Default Name";
$scope._location = "Default Location";
$scope.user = { //set default value to the inputs
     name:$scope._name,
     location:$scope._location
}

answered Nov 2, 2017 at 10:32

phuwin

3,2705 gold badges28 silver badges49 bronze badges

Comments

Manikandan Velayutham · Accepted Answer · 2017-11-02 11:12:13Z

If you are using latest version of angular js. Try ng-model-options="{ getterSetter: true }".

Sometimes it's helpful to bind ngModel to a getter/setter function. A getter/setter is a function that returns a representation of the model when called with zero arguments, and sets the internal state of a model when called with an argument. It's sometimes useful to use this for models that have an internal representation that's different from what the model exposes to the view.

Best Practice: It's best to keep getters fast because AngularJS is likely to call them more frequently than other parts of your code. You use this behavior by adding ng-model-options="{ getterSetter: true }" to an element that has ng-model attached to it. You can also add ng-model-options="{ getterSetter: true }" to a , which will enable this behavior for all s within it. See ngModelOptions for more.

angular.module('myapp', [])
  .controller('myctrl', function($scope) {
    $scope.people = [];
    $scope._name = "Default Name";
    $scope._location = "Default Location";
    $scope.user = {
      name: function(theName) {
        if (angular.isDefined(theName)) {
          $scope._name = theName;
        }
        return $scope._name;
      },
      location: function(theLocation) {
        if (angular.isDefined(theLocation)) {
          $scope._location = theLocation;
        }
        return $scope._location;
      }
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

<div ng-app="myapp" ng-controller="myctrl">
  <form name="userform" ng-submit="addName(user)">
    <p>name: <input type="text" id="name" ng-model="user.name" ng-model-options="{ getterSetter: true }"/></p>
    <p>location: <input type="text" id="location" ng-model="user.location" ng-model-options="{ getterSetter: true }"/></p>
    <button id="btn-add-evangelist">Add to list</button>
  </form>
</div>

Collectives™ on Stack Overflow

Function treated as string in Angular JS

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related