循環瀏覽對象並顯示輸入字段

我有一個由兩個數組組成的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"] 
}

來源

2016-04-27 webDevleoper101

對剩餘的條形碼空間只有投入？例如，如果您的條碼數組長度爲5，您只需要添加/顯示3個輸入？或者如果它的長度是3只顯示3？ –

這是正確的，所以條形碼數組的長度將是顯示多少輸入字段。 – webDevleoper101

你可以用angularJS做，更新回答 –

試試這個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"] 
} 
}

來源

2016-04-27 18:14:21

這段代碼足以將我推向正確的方向。謝謝！ – webDevleoper101

假設

您可以使用NG重複與(index,value)和使用index或使用自動生成的設置每次迭代訪問bar.barcodes元素$index值：每個適配器與每個條形碼意味着adaptors[0]線與barcodes[0]相關。如果數組元素存在，則使用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>

來源

2016-04-27 18:22:33

循環瀏覽對象並顯示輸入字段

回答

相關問題