ng-repeat 和用户在 angular 数据绑定中选择的值

Question

我有三层 json 父子对象（人物 > 投影仪 > 模型）。当用户单击其中一个投影仪时，我想捕获该值并列出仅属于该投影仪的模型。

HTML

<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="num" ng-click="value.val=num">
            <li> {{ oum.Projector }} </li>
          </a>
        </div>
  </uib-accordion-group>

  <h4>
  Listing all Models for picket Projector {{num}}: </h4>

  <uib-accordion-group ng-repeat="first in value">
    <uib-accordion-group ng-repeat="second in first.Projectors">
           {{second.Model}}
    </uib-accordion-group>
  </uib-accordion-group>

 </div>
</div>

APP.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"
                        }
                    ],
                    "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"
                        }
                    ]
                }
             ] 
      }
      ];

});

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

演示：JFiddle

Answer 1

我已经更新了你的fiddle。首先，您在 li 标签上真正需要的父元素上使用 ng-click，这样您就可以将子元素 (oum) 和父元素 (num) 的索引传递给将 return 的函数列表对象中的位置就像这样...

首先更改您的列表组：

<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];      
 }

我已经更新了你的fiddle：https://jsfiddle.net/at6pdhrv/10/

Answer 2

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干杯。

ng-repeat 和用户在 angular 数据绑定中选择的值

ng-repeat and user selected value in angular data binding

json

angularjs

angularjs-ng-repeat

angular-ngmodel