AngularJS how to access values of objects

Question

HTML:

  <div ng-app = "" ng-controller = "personController">
     <p>Persoon: 
        <select ng-model="persoon">
           <option ng-repeat="person in persons">{{person.FirstName}} {{person.FamilyName}}</option>
        </select>
     </p>
     <p>De geboortedatum van <b>{{persoon}}</b> is {{persoon.BirthDate}} en is dus 16 jaar</p>
  </div>

  <script>
     function personController($scope,$http) {
        var persons = "persons.txt";
        var persoon = "";
        $http.get(persons).then( function(response) {
           $scope.persons = response.data;
        });
     }
  </script>

JSON:

[
   {
      "FirstName" : "Harry",
      "FamilyName" : "James",
      "BirthDate" : "29-10-1920"
   }

]

So I have a select box where you are able to select a person. What I want is to display that persons BirthDate. I don't know how to get it to work I've tried several things but nothing is working. Please Help

See docs.angularjs.org/api/ng/directive/select you have to assign the select to some variable — Mr. bug
– Mr. bug, Commented Oct 29, 2017 at 19:08

Sajeetharan · Accepted Answer · 2017-10-29 19:19:29Z

You need to set the value as person.BirthDate

 <option  value="{{person.BirthDate}}"  ng-repeat="person in persons">{{person.FirstName}} {{person.FamilyName}}</option>

DEMO

 var app = angular.module('myapp',[]);
 app.controller('personController',function($scope){
 $scope.persons = [
   {
      "FirstName" : "Harry",
      "FamilyName" : "James",
      "BirthDate" : "29-10-1920"
   }

];
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myapp" ng-controller = "personController">
     <p>Persoon: 
        <select ng-model="persoon">
           <option  value="{{person.BirthDate}}"  ng-repeat="person in persons">{{person.FirstName}} {{person.FamilyName}}</option>
        </select>
     </p>
     <p>De geboortedatum van <b>{{persoon}}</b> is {{persoon.BirthDate}} en is dus 16 jaar</p>
  </div>

EDIT

It is always better to use ng-options instead of ng-repeat.

DEMO

var app = angular.module('myapp',[]);
 app.controller('personController',function($scope){
 $scope.persons = [
   {
      "FirstName" : "Harry",
      "FamilyName" : "James",
      "BirthDate" : "29-10-1920"
   }

];
 });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app = "myapp" ng-controller = "personController">
     <p>Persoon: 
        <select ng-model="persoon" ng-options="n.FirstName + ' ' + n.FamilyName for n in persons"></select>
     </p>
     <p>De geboortedatum van <b>{{persoon}}</b> is {{persoon.BirthDate}} en is dus 16 jaar</p>
  </div>

Collectives™ on Stack Overflow

AngularJS how to access values of objects

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related