javascript - Angular.js 和 HTML/如何并排组合 2 个元素

Question

我有以下 HTML 代码:

<div class="col-sm-9">
   <span class="col-sm-9" ng-repeat="app1 in allDesc[$index]"> {{app1}}</span>
   <label ng-repeat="app2 in allValues[$index]"><input type="text" class="form-control ng-pristine ng-valid ng-valid-required" style="width: 30%" ng-model="app2" ng-disabled="app2" id="inputPassword1" required="" disabled="disabled"></input>
   </label>
</div>
<div>

问题是所有的 span 元素都是一个接一个地写入的，inputs 元素也是如此。我希望每个跨度都将打印在输入附近。

我还尝试了以下方法:

<div class="col-sm-9">
   <span class="col-sm-9" ng-repeat="app1 in allDesc[$index]"> {{app1}}
   <label ng-repeat="app2 in allValues[$index]"><input type="text" class="form-control ng-pristine ng-valid ng-valid-required" style="width: 30%" ng-model="app2" ng-disabled="app2" id="inputPassword1" required="" disabled="disabled"></input>
      </span>
   </label>
</div>
<div>

但随后它只打印 allDesc 的第一个值。

如何使用 ng-repeat 做到这一点？

Answer 1

如果 allDesc 和 allValues 数组具有相同的长度，则您应该仅使用 ng-repeat 指令为 创建一个容器allDesc 或 allValues 项，然后使用 $index 绑定(bind)到数组中未用于 ng-repeat 的项。以下是在 ng-repeat 中使用 allDesc 的示例代码:

   <div class="col-sm-9">
     <div ng-repeat="desc in allDesc">
       <span class="col-sm-9">{{desc}}</span>
       <input type="text" class="form-control" ng-model="allValues[$index]"/>
    </div>
   </div>   

fiddle使用此代码