Angular.js & HTML / how to combine 2 elements side by side

Question

I have the following code in 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>

The problem is that all the span elements are written one after the other, and so the inputs elements. I want that every span will be printed near the input.

I try also the following:

<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>

But then it prints only the first value of allDesc.

How can I do it with ng-repeat ?

Answer 1

If allDesc and allValues arrays have the same length, you should create only one container with ng-repeat directive either for allDesc or allValues items and then use $index to bind to items in the array not used for ng-repeat . Here is example code using allDesc in 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 with this code

Answer 2

Maybe this fiddle is what you are after?

Crux of the issue being how the data was formatted. Creating a new model, and ng-repeating above where you are currently will help.

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

var models.push(test);

Answer 3

</input> This is not valid HTML. <input> has no closing tag. And as far as your question goes here a fiddle . This should get you on the right path.

<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'];
  });