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

Question

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.

Pawan B · Accepted Answer · 2016-09-14 09:15:45Z

2

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>

edited Sep 14, 2016 at 9:15

answered Sep 14, 2016 at 8:34

Pawan B

4,6332 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Soumya Gangamwar Over a year ago

ya it's working but when I select option value =""(source columns) then last select table colums are existing columns drop down.

Pawan B Over a year ago

add '$scope.operationColumn = [];' in the first line of '$scope.getOperationColumns' method , Updated $scope.getOperationColumns method in ans.

Pawan B Over a year ago

@SoumyaGangamwar : Happy to help, and welcome to Stack Overflow. If this answer or any other one solved your issue, please mark it as accepted.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related