Question

我有像

这样的控制器

$scope.operationData = [
  {
         "label" : "Inventory",
         "labelType" : "Master Tables",
         "type" : "PROCESSOR",
         "outputStreams" : 1,
         "elementType" : "TABLE",
         "name" : "Inventory",
               "columns": [
                               {
                              "columnName": "InvoiceName",
                              "dataType": "varchar",
                              "label": "Invoice Name",
                              "required": false,
                              "keyType":"PK"
                           },
                           {
                              "columnName": "InvoiceDate",
                              "dataType": "varchar",
                              "label": "Invoice Date",
                              "required": false
                           }
                          ]
   },{
       "label" : "Order",
       "labelType" : "OutPut Tables",
       "type" : "PROCESSOR",
       "outputStreams" : 1,
       "elementType" : "TABLE",
       "name" : "Order",
       "columns": [
                       {
                      "columnName": "OrderName",
                      "dataType": "varchar",
                      "label":  "Order Name",
                      "required": false
                   },
                   {
                      "columnName": "OrderDate",
                      "dataType": "varchar",
                      "label": "Order Date",
                      "required": false
                   }
                  ]
 },
 {

     "label" : "Purchase Order Details",
     "labelType" : "OutPut Tables",
     "type" : "PROCESSOR",
     "outputStreams" : 1,
     "elementType" : "TABLE",
     "name" : "Purchase Order Details",
           "columns": [
                           {
                          "columnName": "PurchaseOrderName",
                          "dataType": "varchar",
                          "label":  "Purchase Order Name",
                          "required": false,
                          "keyType":"PK"
                       },
                       {
                          "columnName": "PurchaseOrderDate",
                          "dataType": "varchar",
                          "label": "Purchase Order Date",
                          "required": false
                       }
                      ]
 }];

我的观点是

<select class="form-control col-lg-2" ng-model="sourceTable"
         ng-options="tabelName.label for tabelName in operationData"
         ng-change="getOperationColumns(sourceTable)">
<option value=""> Source Tables</option>
 </select>



<select class="form-control col-lg-2" ng-model="sourceColumn"
         ng-options="column in operationColumn">
<option value="">Source Columns</option>
 </select>

这里我附上了jsfiddle链接http://jsfiddle.net/soumyagangamwar/pno7xojh/1/

我的要求是当我选择源表时，我只需要显示源列中的列下拉列表我正在使用ng-change函数但没有获得功能。

示例如果我选择标签 - 广告资源
我希望sourcecolumns中的 InvoiceName，InvoiceDate 下拉列表，如果我选择标签订单，我希望源列中的 OrderName，OrderDate

请帮我这样做。

Answer 1

试试这个jsfiddle

$scope.getOperationColumns = function (sourceTable) {
        $scope.operationColumn = []
        console.log(sourceTable.label, 'sourceTable') 
        for(var i=0; i<$scope.operationData.length; i++) {
            console.log($scope.operationData[i].label,'operation label')
            if(sourceTable.label === $scope.operationData[i].label) {
                for(var j=0;j<$scope.operationData[i].columns.length; j++) {
                    $scope.operationColumn=$scope.operationData[i].columns // UPDATED HERE
                }
            }
            //console.log($scope.operationColumn, '$scope.operationColumnfor')
        }

        console.log($scope.operationColumn, '$scope.operationColumn')

     }

html更新：

<select class="form-control col-lg-2" ng-model="sourceColumn"
             ng-options="column.columnName for column in operationColumn">
    <option value="">Source Columns</option>
     </select>

如何根据角度js中的表数组下拉列？

1 个答案: