循环遍历对象并显示输入字段答案

【问题标题】：Looping through an object and displaying input fields循环遍历对象并显示输入字段
【发布时间】：2016-04-27 18: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"]
}

【问题讨论】：

只输入剩余的条形码空间？例如，如果您的条形码数组的长度为 5，您只想添加/显示 3 个输入？或者如果它的长度是 3 只显示 3？
这是正确的，所以barcodes数组的长度就是显示多少个输入字段。
你可以用angularJS来做，更新答案
这就是我现在正在尝试的，ng-repeat="(adptors,barcodes) in barcodes" 让我接近但不是一直到那里，我是 angular.js 的新手

标签： javascript jquery arrays angularjs loops

【解决方案1】：

试试这个 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"]
 }
}

【讨论】：

这段代码足以将我推向正确的方向。谢谢！

【解决方案2】：

假设每个适配器与每个条形码相关联，意思是 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>

【讨论】：