Aquí puedo imprimir los detalles de la familia, pero no los de los miembros. Dentro de la selección desplegable se muestran los detalles del miembro.

 <form class="form-horizontal" ng-app="myApp" ng-controller="myCtrl">

  <div class="form-group"  >
   <label class="control-label">Family : </label>
   <select class="form-control " ng-model="family"
        ng-options="o as o.familyName for o in list">
   </select>
  </div>

  <div class="form-group" ng-if="family" >
    <label class="control-label">Head of family : </label>
    <select class="form-control" ng-model="familyHead"
        ng-options="p as p.name for p in family.members" >
    </select>
  </div>

   Family : {{family}} <br> Head : {{familyHead}}
 </form> 
2
B G Nithin Malathesh 14 dic. 2016 a las 09:42

2 respuestas

La mejor respuesta

En primer lugar, su formulario no está cerrado correctamente y su objeto de asignación al modelo e intentando imprimir ese objeto después de seleccionar el cierre.

Así que agregué un evento de cambio para el cuadro de selección y pasé ese objeto a la función y luego obtuve el campo requerido en la declaración de impresión como se muestra a continuación

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <form class="form-horizontal" >

  <div class="form-group"  >
   <label class="control-label">Family : </label>
    <select class="form-control " ng-model="family"
        ng-options="o as o.familyName for o in list">                                           </select>
    </div>

  <div class="form-group" ng-if="family" >
  <label class="control-label">Head of family : </label>
   <select ng-change="s(familyHead)"  class="form-control" ng-model="familyHead"
        ng-options="p as p.name for p in family.members" >
     
   </select>

  </div>

   Head : {{head}}
   </form>
  </body>
<script>
  var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  
  $scope.list = [
    {
      familyName:'Joy',
      members:[
        {relation:'father', name:'Amd Joy'},
        {relation:'mother', name:'menna Joy'},
        {relation:'child', name:'Kevin Joy'}
        ]} , 
        {
          familyName:'Snow', 
          members:[
            {relation:'father', name:'Jhon Snow'},
            {relation:'mother', name:'eva Snow'}, 
            {relation:'child', name:'Kevin Snow'}]
          
        }
        ];
        $scope.s=function(x){
          console.log(x);
          $scope.head=x.name;
        };
 
});
</script>
</html>
1
Sa E Chowdary 14 dic. 2016 a las 07:05

Consulte la demostración de jsfiddle url.

[1]: https://jsfiddle.net/Ly5s70ce/
0
Sathiyaraj 14 dic. 2016 a las 07:01