Question

我有2个集合：名称和值。如何使用bootstrap列和agularjs（如图像）显示它。 enter image description here 我试试这个，但它没有给出所需的结果：

   <div class="row" >
      <div class="col-sm-6" ng-repeat="name in controller.names">
          <label>{{ name }}</label>
      </div>
      <div class="col-sm-6" ng-repeat="value in controller.values">
          <label>{{ value }}</label>
      </div>
   </div>

首先它显示所有名称，并显示所有值。

Answer 1

试试这个：

<div class="row" >
      <div class="col-sm-6">
          <div ng-repeat="name in controller.names">
              <label>{{ name }}</label>
          </div>
      </div>
      <div class="col-sm-6">
          <div ng-repeat="value in controller.values">
              <label>{{ value }}</label>
          </div>
      </div>
</div>

您重复列而不是在所述列中放置div。这导致

[a][b]
[c][1]
[2][3]

而不是

[a][1]
[b][2]
[c][3]

额外解决方案： 建立在问题的前提下，如果你想要将值与＃34;粘在一起，那么说，对于属于特定名称的特定值，你可能需要设置如下：

controller.owners = [{name: "a", value: 1},{name: "b", value: 2},{name: "c", value: 3}];

使用你的html：

<div class="row" ng-repeat="owner in controller.owners">
    <div class="col-sm-6">
        <label>{{owner.name}}</label>
    </div>
    <div class="col-sm-6">
        <label>{{owner.value}}</label>
    </div>
</div>

Answer 2

你可以只做一个ng-repeat并显示如下所示的标签和名称。

我们遍历ng-repeat中的名称并使用循环数组的$index变量并选择$scope.values数组中的相应值，如果这对您有帮助，请告诉我们！

我已添加well类突出显示列位置！你可以删除它，如果你想要的话！

＆＃13;

var app = angular.module('myApp', []);

app.controller('MyController', function MyController($scope) {
  $scope.names = ["name1", "name2", "name3", "name4", "name5", "name6"];
  $scope.values = [1, 2, 3, 4, 5, 6];
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-controller='MyController' ng-app="myApp">
  <div class="col-xs-12">
    <div class="row">
      <div class="col-xs-6 well" ng-repeat="name in names" >
        <label for="">{{name}}</label><br>
        <label for="">{{values[$index]}}</label>
      </div>
    </div>
  </div>
</div>

＆＃13;

使用2 ng-repeat，并排显示2个集合中的元素

2 个答案: