AngularJS：將模態返回的數據綁定到從中單擊的行

Question

在這里使用AngularJS。

我正在使用具有下拉菜單的UI。 根據用戶選擇的內容，我向用戶顯示2個選項卡。

每個選項卡數據都是從服務返回的，該服務僅返回數據數組（字符串）。

針對返回的每個字符串值，我顯示一個針對它的按鈕。 當您單擊按鈕時，它將打開一個模式彈出窗口，用戶可以在其中選擇一些數據。 當他們關閉模態時，我將數據返回給控制器。

將數據綁定到選項卡，打開模式並從模式返回數據的正常流程都可以正常工作。

我無法理解或設計的是如何將返回的數據綁定到單擊它的按鈕或行上

例如如下：

Tab1

String1 - Button1

String2 - Button2

String3 - Button3

如果我通過單擊button1打開模式，則如何找出button1被按下並綁定回從其模式返回的數據。

一些相關的代碼如下：

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

控制器：

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

我為此示例創建了一個plnkr，如下所示： 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>

Answer 1

將table對象作為參數傳遞給openModal函數：

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

在openModal函數中使用它：

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

確保使用結果關閉模式：

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

請記住，模態被認為是破壞性的，並且被用戶鄙視。

一般來說，干擾和分心會負面影響人類的表現，這是認知心理學中的常見發現。 許多研究表明，分心會大大增加各種任務的工作時間。

有關更多信息，請參見

• 有哪些研究表明模態對話具有破壞性？

---

雖然我沒有收到任何錯誤，但是我沒有得到返回的文本。

確保為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',},
          ];
      // });
  };

PLNKR上的演示

Answer 2

嘗試將table傳遞給模板中的openModal

<button ng-click="openModal(table)"

現在，您可以在openModal函數openModal其用作參考

$scope.openModal = function (table) {
  // table === the clicked table
}