Soumya Gangamwar Soumya Gangamwar - 2 months ago 11
Javascript Question

How to get column in drop down according to table array in angular js?

I have controller like

$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
}
]
}];


my view is

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


Here I attached jsfiddle link http://jsfiddle.net/soumyagangamwar/pno7xojh/1/

my requirement is when I select sourcetables I have to show only that columns in source column drop down I am using ng-change function but not getting the functionality.

Example If I select label-Inventory

I want InvoiceName,InvoiceDate in sourcecolumns drop down,
If I select label-Order I want OrderName,OrderDate in source columns

Please help me to do that.

p2. p2.
Answer

Try this 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')

     }

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