CODEWITHSUNDEEP
javascriptangularjsangularjs-scopeangularjs-ng-repeat
Silvestre Herrera
Silvestre Herrera

Reputation: 445

Obtain data from the $scope

First off I'd like to say that I'm just starting with AngularJS, so please excuse me if this is a stupid question.

I have a controller that performs an AJAX request and it returns a JSON object. This JSON is then saved as $scope.person. It look's like this:

function PersonController($scope, $http) {
  $http({
    method: 'GET',
    url: constants.adminUrl + '/getJSON.php?data=person'
  }).success(function(data, status, headers, config) {
    $scope.person = data;
  }).error(function(data, status, headers, config) {
    throw new Error('I\'m truly sorry, but I couldn\'t fetch your data');
  });
}

The file getJSON.php successfully returns what I expect, a JSON object which looks like this:

[{
  "id": 1,
  "firstName": "Silvestre",
  "lastName": "Herrera",
  "headline": "Diseñador y front-end engineer",
  "location": "Argentina",
  "summary": "Summary summary summary"
}]

And then, in my HTML I have the following:

<ol ng-controller="PersonController">
  <li ng-repeat="person in person | filter: {id:1}">
      <input data-autoGrow name="firstName" type="text" value="{{ person.firstName }}" placeholder="<?= __("What's your first name?"); ?>"><input data-autoGrow name="lastName" type="text" value="{{ person.lastName }}" placeholder="<?= __("And your last name?"); ?>">
  </li>
  <li ng-repeat="person in person | filter: {id:1}"><input type="text" value="{{ person.headline }}" placeholder="<?= __("Headline"); ?>"></li>
  <li ng-repeat="person in person | filter: {id:1}"><input type="text" value="{{ person.location }}" placeholder="<?= __("Where do you live?"); ?>"></li>
  <li ng-repeat="person in person | filter: {id:1}"><textarea placeholder="<?= __("Write something about you..."); ?>">{{ person.summary }}</textarea></li>
</ol>

All the PHP function __() does is translate the given string. Anyway, as you can see I'm using the ng-repeat directive which I'd like to avoid as there's only one person and there will always be only one.

What I tried was using ng-model="person" in the <ul> element instead of ng-repeat="person in person" in every <li> and then try printing {{ person.firstName }} but nothing gets printed. But if I print {{ person }} I do get the whole object.

Well, I guess that pretty much sums up my problem. Thanks in advance for any input!

Upvotes: 0

Views: 73

Answers (3)

citizenslave
citizenslave

Reputation: 1418

You don't use the ng-model directive when you're setting the content of an HTML tag. ng-model is the Angular way to handle the value attribute in form fields. For your purposes, you should be able to just write:

<ol ng-controller="PersonController">
  <li>
    <input data-autogrow name='firstName' ng-model='person[0].firstName'/>
    <input data-autogrow name='lastName' ng-model='person[0].lastName'/>
  </li>
  <li><input ng-model='person[0].headline'/></li>
  <li><input ng-model='person[0].location'/></li>
  <li><textarea ng-model='person[0].summary'/></li>
</ol>

Note, the textarea tag is not actually vanilla HTML, it's an AngularJS directive implementing the same functionality, so it doesn't work in quite the same way and you can still bind the ng-model attribute instead of plugging it into the content as you would in vanilla HTML.

Upvotes: 2

karaxuna
karaxuna

Reputation: 26930

Can't you do like this?:

$scope.person = data[0];

Upvotes: 2

Deepak N
Deepak N

Reputation: 2571

You can not use same variable name 'person' for array and items in array. Your code should be

$scope.people = data;

Then in html

<li ng-repeat="person in people | filter: {id:1}">

Upvotes: 0

Related Questions