我有三层json父子对象（“人物”>“投影仪”>“模型”）。当用户单击一个投影仪时，我想捕获该值，并列出Model仅属于该投影仪。
的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
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"
}
]
}
]
}
];
});
演示在这里加油。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句