Angular ng-repeat基于另一个ng-repeat
我的应用程序中有一个<select>，它是从ng-repeat提供的数据，但select中的每个选项都有自己的数据。非常简单，下面是我正在使用的JSON有效负载：
{
"0":{
"name":"Mover",
"scalar":[
{
"name":"Size",
"unit":"m"
},
{
"name":"Speed",
"unit":"m/s"
}
]
},
"1":{
"name":"Stationary",
"scalar":[
{
"name":"Size",
"unit":"m"
}
]
},
"2":{
"name":"Vibrator",
"scalar": [
{
"name":"Frequency",
"unit":"hz"
}
]
}
}我需要select中的外部3个名称，但我希望‘标量’值显示为select旁边的复选框。它显然是动态的，所以我很好奇是否有一种方法可以基于select的ng-repeat来做到这一点。我问这个问题的另一个原因是，由于格式化的原因，我想将复选框放在ng-repeat之外(显然是因为它是在select中)，所以不太确定复选框将如何访问repeat值。以下是html代码片段：
<div id="type-selection"
class="row ng-hide"
ng-show="rcw.page ==='Type Selection'">
<div class="col-md-6">
<div class="form-group">
<label for="rule-type">Type</label>
<select id="rule-type"
class="form-control"
ng-model="rcw.selectedRuleType">
<option ng-repeat="type in rcw.QueryTypes">{{type.name}}</option>
</select>
</div>
</div>
<div class="col-md-2" ng-repeat="ideally scalar in type from above^">
<label>
<input type="checkbox"
class="faChkSqr"
ng-model="ideally this would be dynamically tied to scalar.name </input>
<span></span>
<b>{{ideally this would be scalar.name}}</b>
</label>
</div>
</div>只是不太确定这是否可能，或者如果我需要处理选择的内容，然后在javascript中决定需要显示的内容？提前感谢！
回答 3
Stack Overflow用户
发布于 2017-01-18 22:26:49
您将选择存储在一个变量中：rcw.selectedRuleType
<select id="rule-type" class="form-control" ng-model="rcw.selectedRuleType">
<option ng-repeat="type in rcw.QueryTypes">{{type.name}}</option>
</select>我想你只需要用你的ng-repeat来循环这个对象：
<div class="col-md-2" ng-repeat="scalar in rcw.selectedRuleType">
{{scalar.name}}
</div>顺便提一下，我建议您在选择时使用ng-options：
<select ng-model="rcw.selectedRuleType"
ng-options="type as type.name in rcw.QueryTypes">
</select>Stack Overflow用户
发布于 2017-01-18 22:42:40
试着这样做。
<li ng-repeat="n in items">{{n.name}}{{n.scalar}}
<select ng-model="selectme" ng-options="options.name for options in n.scalar">
<option value="">-- choose color --</option>
</select>{{selectme}}
</li>Stack Overflow用户
发布于 2017-01-18 23:09:34
我们可以根据选择创建复选框，但不确定如何基于scaler.name动态绑定模型。
我们需要设置option的值作为所选option.Then的定标器，我们应该监听select字段上的变化事件，并从所选值中提取标量值。
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.QueryTypes = [{
"name":"Mover",
"scalar":[
{
"name":"Size",
"unit":"m"
},
{
"name":"Speed",
"unit":"m/s"
}
]
},
{
"name":"Stationary",
"scalar":[
{
"name":"Size",
"unit":"m"
}
]
},
{
"name":"Vibrator",
"scalar": [
{
"name":"Frequency",
"unit":"hz"
}
]
}
];
$scope.getScalarTypes=function(){
$scope.scalarTypes=JSON.parse($scope.selectedRuleType);
}
});<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div id="type-selection">
<div class="col-md-6">
<div class="form-group">
<label for="rule-type">Type</label>
<select id="rule-type"
class="form-control"
ng-model="selectedRuleType" ng-change="getScalarTypes()">
<option ng-repeat="type in QueryTypes" value="{{type.scalar}}">{{type.name}}</option>
</select>
</div>
</div>
<div class="col-md-2" ng-repeat="scalar in scalarTypes">
<label>
<input type="checkbox"
class="faChkSqr"</input>
<span></span>
<b>{{scalar.name}}</b>
</label>
</div>
</div>
</div>
</body>
</html>
https://stackoverflow.com/questions/41721863
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号