遍历对象并显示输入字段
遍历对象并显示输入字段
提问于 2016-04-28 02:02:18
我有一个由两个数组组成的javascript对象。我们可以调用一个数组适配器和另一个条形码。适配器数组将始终具有8个字符串，而条形码将始终具有3个字符串，但最多可以具有8个字符串。好的，所以我需要显示适配器字符串，条形码字符串，然后有一个输入字段供用户输入另一个字符串(条形码)。但是，我需要找到条形码数组的长度，然后只显示这么多输入字段。实现这一目标的最简单方法是什么？jQuery，Angular？
var bar = {
“adaptors”: ["506-707", "502-701", "501-708", "507-706", "508-704", "505-703", "503-705", "504-702" ],
“barcodes”:["11-11-1111","11-11-2222","11-11-3333","11-11-4444"]
}
回答 2
Stack Overflow用户
发布于 2016-04-28 02:14:22
试试这段angularJS代码，下面是有效的fiddle
视图
<div ng-controller="MyCtrl">
<div ng-repeat="(index,val) in bar.adaptors">
{{val}} <input type="text" ng-show="bar.barcodes[index]">
</div>
</div>控制器
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.bar = {
adaptors: ["506-707", "502-701", "501-708", "507-706", "508-704", "505-703", "503-705", "504-702" ],
barcodes:["11-11-1111","11-11-2222","11-11-3333","11-11-4444"]
}
}Stack Overflow用户
发布于 2016-04-28 02:22:33
假设每个适配器与每个条形码相关，这意味着adaptors[0]与barcodes[0]对齐
您可以对(index,value)使用ng-repeat并使用index，或者使用每次迭代设置的自动生成的$index值来访问bar.barcodes元素。如果数组元素存在，则使用ng-if仅生成输入。
angular.module('app',[]).controller("ctrl",["$scope",function($scope){
$scope.bar = {
"adaptors": ["506-707", "502-701",
"501-708", "507-706",
"508-704", "505-703",
"503-705", "504-702" ],
"barcodes":["11-11-1111","11-11-2222","11-11-3333","11-11-4444"]
};
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<table ng-app="app" ng-controller="ctrl">
<tr ng-repeat="adaptor in bar.adaptors">
<th>Adaptor</th><td>{{adaptor}}</td>
<th>Barcode</th><td>
<input ng-if="bar.barcodes[$index]" ng-model="bar.barcodes[$index]">
</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/36897534
复制相关文章
相似问题
腾讯云开发者
