Question

在这里，我可以打印家庭详细信息但不能查看会员详细信息。内部选择下拉成员详细信息正在显示。

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

Answer 1

首先，您的表单未正确关闭，您的指定对象将在建模关闭后进行建模并尝试打印该对象。

所以我为选择框添加了一个更改事件，并将该对象传递给该函数，然后将所需字段提取到print语句，如下所示

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

Answer 2

请参阅jsfiddle网址Demo

[1]: https://jsfiddle.net/Ly5s70ce/

选择标签ng-model不起作用

2 个答案: