在这里使用 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
--已编辑--
<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>