AngularJS: Bind data returned from a modal to row it was clicked from

Question

Using AngularJS here.

I am working on a UI which has a dropdown. Based on what the user selects I show 2 tabs to the user.

Each tab data is returned from a service which just returns an array of data (string).

Against each string value returned I show a button against it. When you click the button it opens a modal popup where the user can select some data. When they close the modal I return the data back to the controller.

The normal flow of binding data to tab, opening modal and returning data from modal all works fine.

What I am not able to understand or design is how to bind the returned data against the button or row which it was clicked from

For example as below:

Tab1

String1 - Button1

String2 - Button2

String3 - Button3

If I open the modal by clicking button1, how do I find out button1 was pressed and bind back data that was returned from its modal.

Some of the relevant code as below:

<div id="params" ng-if="type.selected">
  <tabset class="tabbable-line">
    <tab heading="Sets" ng-if="sets" active="tab.set">    
        <div class="form-group m-grid-col-md-8 param" style="margin-top:5px"
             ng-repeat="set in sets" >
              <label class="control-label col-md-3 param-label">{{set}}
              </label>                  
              <button ng-click="openModal()" class="btn btn-info btn-sm">
                Select
              </button> 
        </div>
    </tab>
    <tab heading="Tables" ng-if="tables" active="tab.table">       
        <div class="form-group m-grid-col-md-8 param"
             ng-repeat="table in tables">
            <label class="control-label col-md-3 param-label">{{table}}
            </label>               
            <button ng-click="openModal()" class="btn btn-info btn-sm">
                Select
            </button>
            </div>
        </tab>
    </tabset>
</div>

Controller:

  $scope.onChangeType = function (selectedValue) {           
       $scope.getData(selectedValue);
  };

  $scope.getData = function (selectedValue) {
      //Commenting out the service part for now and hardcoding array
      // service.getData(selectedValue).then(function (res) {
           $scope.sets = ['Set1', 'Set2', 'Set3'];   
           $scope.tables = ['Table1', 'Table2'];
      // });
  };


  $scope.openModal = function () {
       myFactory.defineModal().then(function (response) {
            //how to bind data from response
        });
   };

I have created a plnkr for this sample as: http://plnkr.co/edit/vqtQsJP1dqGnRA6s?preview

--Edited--

 <div class="form-group m-grid-col-md-8 param" ng-repeat="table in tables">
    <label class="control-label col-md-3 param-label">{{table}}
    </label>               
    <button ng-click="openModal(table)" class="btn btn-info btn-sm">
        Select
    </button>
       <span>
        {{table.utype}}
    </span> 
</div>

georgeawg georgeawg · Accepted Answer · 2019-05-02T18:02:10

Pass the table object as an argument to the openModal function:

<button ng-click="openModal(table)">Select</button>

Use it in the openModal function:

$scope.openModal = function (table) {
     myFactory.defineModal().then(function (result) {
         table.utype = result.utype;
         table.minvalue = result.minvalue;
     });
};

Be sure to close the modal with the result:

$scope.ok = function () {
    var result = { 
      utype: $scope.utype,
      minvalue: $scope.minvalue,
    };
    $modalInstance.close(result); 
};

Keep in mind that modals are considered disruptive and are despised by user.

Generally speaking, disruptions and distractions negatively affect human performance, a common finding in cognitive psychology. Many studies have shown that distraction greatly increases task time on a wide variety of tasks.

For more information, see

What research is there suggesting modal dialogs are disruptive?

While I dont get any error not but I dont get the text returned.

Be sure to furnish objects to the ng-repeat:

  $scope.getData = function (selectedValue) {
      //Commenting out the service part for now and hardcoding array
      // service.getData(selectedValue).then(function (res) {
           ̶$̶s̶c̶o̶p̶e̶.̶t̶a̶b̶l̶e̶s̶ ̶=̶ ̶[̶'̶T̶a̶b̶l̶e̶1̶'̶,̶'̶T̶a̶b̶l̶e̶2̶'̶]̶;̶
           $scope.tables = [
             {name:'Table1',},
             {name:'Table2',},
          ];
      // });
  };

AngularJS: Bind data returned from a modal to row it was clicked from

2 Answers

The DEMO on PLNKR