AngularJS:绑定从模态返回到行的绑定数据

Question

在此处使用angularjs。

我正在处理列表的UI。根据用户选择的内容，我向用户显示2个选项卡。

每个选项卡数据都从刚刚返回数据数组(字符串(的服务返回。

针对返回的每个字符串值，我显示一个按钮。单击按钮时，将打开模态弹出窗口，用户可以在其中选择一些数据。当他们关闭模式时，我将数据返回到控制器。

绑定数据与选项卡的正常流动，打开模态的模态和返回数据都很好。

我无法理解或设计的是如何将返回的数据绑定到从

中单击的按钮或行绑定

例如，如下：

Tab1
String1 - Button1
String2 - Button2
String3 - Button3

如果我通过单击按钮1打开模态，如何按下按钮1并绑定了从其模态返回的数据。

某些相关代码如下：

<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

- 编辑 -

 <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功能中的参考

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