Question

我有三层json父子对象（Persons＆gt; Projectors＆gt; Model）。当用户点击其中一个投影仪时，我想捕获该值，列表模型仅属于该投影仪。

HTML

angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = {val:"TEST"};
      $scope.filterBy = {};

      $scope.list = [{
            "Title":"King",
          "BossName":[
                {
                    "User": "TestUSer",
                    "Name": "TestName"
                }
            ],
           "Projectors":[
                {
                    "Projector": "TestParam",
                    "Type": [
                        {
                            "Name": "TestVI"
                        }
                    ],
                    "Model": [
                        {
                            "Service": "TestSev",
                            "Notification": "TestNot"
                        }
                    ]
                },
                {
                    "Projector": "TestHouse",
                    "Type": [
                        {
                            "Name": "TestI"
                        }
                    ],
                    "Model": [
                        {
                            "Service": "TestCri",
                            "Notification": "TestOk"
                        }
                    ]
                }
             ] 
      },
      {
            "Title":"Queen",
          "BossName":[
                {
                    "User": "Liz",
                    "Name": "Nothing"
                }
            ],
           "Projectors":[
                {
                    "Projector": "PTestParam",
                    "Type": [
                        {
                            "Name": "TestVI"
                        }
                    ],
                    "Model": [
                        {
                            "Service": "TestSev",
                            "Notification": "TestNot"
                        }
                    ]
                },
                {
                    "Projector": "PTestHouse",
                    "Type": [
                        {
                            "Name": "TestI"
                        }
                    ],
                    "Model": [
                        {
                            "Service": "TestCri",
                            "Notification": "TestOk"
                        }
                    ],
                    "Model": [
                        {
                            "Service": "3TestCri",
                            "Notification": "3TestOk"
                        }
                    ]
                }
             ] 
      }
      ];

});

APP.JS

http://tuckey.org/urlrewrite/

问题： 1.如何捕获用户点击/选择的值？我在该标签上尝试使用ng-model进行数据绑定，但对我不起作用。 2.现在，当我点击任何投影仪时，它还会列出其他投影仪的模型值。

演示：JFiddle

Answer 1

1）看起来你的json有点不对劲。最后一台投影机有2台投影机型号。通常它应该像

                     "Models":[
                          {
                              "Service": "TestCri",
                              "Notification": "TestOk"
                          },
                          {
                              "Service": "Test43Cri",
                              "Notification": "TestNotOk"
                          }
                      ]

然后我们在标记中访问它们

<uib-accordion-group ng-repeat="model in value.val.Models">
       {{model}}
</uib-accordion-group>

2）Listing all Models for picket Projector {{num}}:可能不会为您显示任何值，因为num将在ng-repeat的范围内创建。 ng-repeat使用它自己的范围。所以你必须使用在控制器范围内创建的value.val

3）完成上述更改后，您不需要

<uib-accordion-group ng-repeat="first in value">

4）<br>是正确的方法。 </br>是错误的方式。这是一个自我结束的标签。

所以，你的标记就像是

<div ng-app="myApp" ng-controller="MyController">
<h4>
  Two Way Data Bind
</h4>
<lable style="color:green"> The value you picked (JSON): </lable>
{{value.val}}

<br>
<div close-others="oneAtATime">
  <uib-accordion-group ng-repeat="num in list">
      <uib-accordion-heading>
          {{ num.Title }}                                 
      </uib-accordion-heading>
        <div class="list-group"> 
          <a href="#" ng-repeat="oum in num.Projectors" ng-model="oum" ng-click="value.val=oum">
            <li> {{ oum.Projector }} </li>
          </a>
        </div>
  </uib-accordion-group>

  <h4>
  Listing all Models for picket Projector: </h4>
    <uib-accordion-group ng-repeat="model in value.val.Models">
           {{model}}
    </uib-accordion-group>
 </div>
</div>

你的js就像是

angular.module('myApp', [])
    .controller('MyController', function($scope){
      $scope.value = {val:"TEST"};
      $scope.filterBy = {};

      $scope.list = [{
            "Title":"King",
          "BossName":[
                {
                    "User": "TestUSer",
                    "Name": "TestName"
                }
            ],
           "Projectors":[
                {
                    "Projector": "TestParam",
                    "Type": [
                        {
                            "Name": "TestVI"
                        }
                    ],
                     "Models":[
                        {
                            "Service": "TestSev",
                            "Notification": "TestNot"
                        }
                    ]
                },
                {
                    "Projector": "TestHouse",
                    "Type": [
                        {
                            "Name": "TestI"
                        }
                    ],
                     "Models":[
                        {
                            "Service": "TestCri",
                            "Notification": "TestOk"
                        }
                    ]
                }
             ] 
      },
      {
            "Title":"Queen",
          "BossName":[
                {
                    "User": "Liz",
                    "Name": "Nothing"
                }
            ],
           "Projectors":[
                {
                    "Projector": "PTestParam",
                    "Type": [
                        {
                            "Name": "TestVI"
                        }
                    ],
                     "Models":[
                        {
                            "Service": "TestSev",
                            "Notification": "TestNots"
                        }
                    ]
                },
                {
                    "Projector": "PTestHouse",
                    "Type": [
                        {
                            "Name": "TestI"
                        }
                    ],
                    "Models":[
                          {
                              "Service": "TestCri",
                              "Notification": "TestOk"
                          },
                          {
                              "Service": "Test43Cri",
                              "Notification": "TestNotOk"
                          }
                      ]
                }
             ] 
      }
      ];

});

演示here干杯。

Answer 2

我已经更新了你的小提琴。首先，你在li标签上使用你真正需要它的父元素上的ng-click，这样你就可以将子（oum）和父（num）的索引传递给一个函数，该函数将返回像这样列出对象......

首先更改为您的列表组：

<div class="list-group"> 
     <ul ng-repeat="oum in num.Projectors" ng-model="num" >
         <li><a href="#" ng-click="showMe($parent.$index, $index)"> {{ oum.Projector }}</a></li>
      </ul>
</div>

然后在你的控制器......

$scope.showMe = function(parent,child){      
  $scope.value.val = $scope.list[parent].Projectors[child];      
 }

我更新了你的小提琴：https://jsfiddle.net/at6pdhrv/10/

角度数据绑定中的ng-repeat和用户选择的值

2 个答案: