2016-09-14 88 views
1

我有這樣如何在角度js中根據表數組下拉列?

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

我的要求是,當我選擇sourcetables我都必須表現源僅列列下拉式我正在使用ng-change函數,但沒有獲得功能。

例如,如果我選擇無標記庫存
我想InvoiceName,InvoiceDate在sourcecolumns降了下來, 如果我選擇標籤階我想ORDERNAME,訂購日期在源列

請幫我做到這一點。

回答

2

在HTML試試這個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') 

    } 

更新:

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

雅它的工作,但是當我選擇期權價值=「」(來源列),然後最後一個選擇表colums是現有列下拉。 –

+0

add'$ scope.operationColumn = [];'在'$ scope.getOperationColumns'方法的第一行中,更新了ans中的$ scope.getOperationColumns方法。 –

+0

@SoumyaGangamwar:樂於幫忙,歡迎來到Stack Overflow。如果此答案或任何其他人解決了您的問題,請將其標記爲已接受。 –

相關問題