如何使用ng-repeat创建一个包含某些列的表作为下拉列表

Question

我有以下JSON

[{
  "CompID": "0001388D",
  "Domains": [{
    "Banking": 1,
    "Finance": "Working",
    "ECommerce": "Working"
  }],
  "CompName": "INFY",
  "CompLoc": "IN"
}, {
  "CompID": "0001388D2",
  "Domains": [{
    "Banking": 1,
    "Finance": "Working",
    "ECommerce": "Working"
  }],
  "CompName": "TCS",
  "CompLoc": "IN"
}]

使用Angular JS我以表格格式表示上述数据，如下所示

<table border="1">
      <tr>
         <th ng-repeat="(key, val) in collectioninfo[0]" ng-if="allDropDownsHere.indexOf(key)==-1">{{ key }}</th>
      </tr>
      <tr ng-repeat="row in collectioninfo">
         <td ng-repeat="(key2, val2) in row" >
            {{ val2 }}
         </td>
      </tr>
   </table>

此作品，但我想将域名表示为下拉列表值。

我尝试使用ng-if其中allDropDownsHere范围值包含需要在下拉列表中显示的所有值

  <th ng-repeat="(key, val) in collectioninfo[0]" ng-if="allDropDownsHere.indexOf(key)==-1">{{ key }}</th>

这是我的小提琴

http://jsfiddle.net/9fR23/488/

你能告诉我如何达到预期的效果吗？

Answer 1

如果我理解你的正确跟随会帮助你。

以下是基于您的问题的一般解决方案。假设如下。

1. 下拉列的键必须位于数组$scope.allDropDownsHere

中

2. 下拉列表是一个数组，第0个位置的值会作为下拉列表重复。

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function($scope) {


  $scope.allDropDownsHere = ['Domains']


  $scope.collectioninfo = [{
      "CompID": "0001388D",
      "Domains": [{
        "Banking": 1,
        "Finance": "Working",
        "ECommerce": "Working"
      }],
      "CompName": "INFY",
      "CompLoc": "IN"
    },
    {
      "CompID": "0001388D2",
      "Domains": [{
        "Banking": 1,
        "Finance": "Working",
        "ECommerce": "Working"
      }],
      "CompName": "TCS",
      "CompLoc": "IN"
    },
    {
      "CompID": "0001388D23",
      "Domains": [{
        "Banking": 1,
        "Finance": "Working",
        "ECommerce": "Working"
      }],
      "CompName": "WIPRO",
      "CompLoc": "IN"

    }
  ]
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myapp" ng-controller="FirstCtrl">
  <table border="1">
    <tr>
      <th ng-repeat="(key, val) in collectioninfo[0]">
        <span ng-if="allDropDownsHere.indexOf(key)>=0">
          <select>
            <option>{{key}}</option>
            <option ng-repeat="(k, v) in val[0]" value="{{v}}">{{k}}</option>
          </select>
        </span>
        <span ng-if="allDropDownsHere.indexOf(key)<0">
          {{ key }}
        </span>
      </th>
    </tr>
    <tr ng-repeat="row in collectioninfo">
      <td ng-repeat="(key2, val2) in row">
        <span ng-if="allDropDownsHere.indexOf(key2)>=0">
          <select>
            <option ng-repeat="(k, v) in val2[0]" value="{{v}}">{{k}}</option>
          </select>
        </span>
        <span ng-if="allDropDownsHere.indexOf(key2)<0">
          {{ val2 }}
        </span>
      </td>
    </tr>
  </table>
</div>