AngularJS 如何访问对象的值

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

Answer 1

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>