タグを選択するとNGモデルが動作しない

ここでは家族の詳細を印刷できますが、メンバーの詳細は印刷できません。選択されたドロップダウン内のメンバーの詳細が表示されます。タグを選択するとNGモデルが動作しない

<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>

出典

2016-12-14 B G Nithin Malathesh

以下のようにprint文に必要なフィールドを取得しますと家族 –

すべてのフォームが正しく閉じられていないし、あなたの割り当てオブジェクトをモデル化し、[閉じる]を選択した後、そのオブジェクトを印刷しようとしているの最初のjsfiddle URLをご参照ください。

ので、私は、選択ボックスの変更イベントを追加し、関数にそのオブジェクトを通過した後、uは、リストのデータを提供することができます

<!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="[email protected]" 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>

出典

2016-12-14 07:05:44

こんにちはありがとう、それは働いて –

ようこそ......... –