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元素都是一个接一个地写的，所以输入元素也是如此。我希望每个跨度都打印在输入附近。

我还尝试以下方法：

<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绑定到不用于ng-repeat的数组中的项目。以下是allDesc中使用ng-repeat的示例代码：

   <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使用此代码

Answer 2

也许这个fiddle就是你所追求的？

问题的症结在于数据的格式化方式。创建一个新模型，并在上面的位置进行ng重复将有所帮助。

var test = {};
test.span = 'a';
test.input = '1';

var models.push(test);

Answer 3

</input>这不是有效的HTML。 <input>没有结束标记。至于你的问题在这里fiddle。这应该会让你走上正确的道路。

<div ng-app="orSmith" ng-controller="ExampleController">
    <label ng-repeat="item in allValues">{{item}}
        <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" />
    </label>
</div>

  angular.module('orSmith', [])
      .controller('ExampleController', function ($scope) {
      $scope.allValues = ['a', 'b', 'c', 'd'];
      $scope.allDesc = ['test', 'test2'];
  });

Angular.js＆amp; HTML /如何并排组合2个元素

3 个答案: