[英]AngularJS: Bind data returned from a modal to row it was clicked from
Using AngularJS here. 在这里使用AngularJS。
I am working on a UI which has a dropdown. 我正在使用具有下拉菜单的UI。 Based on what the user selects I show 2 tabs to the user.
根据用户选择的内容,我向用户显示2个选项卡。
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. 如果我通过单击button1打开模式,则如何找出button1被按下并绑定回从其模式返回的数据。
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 我为此示例创建了一个plnkr,如下所示: http ://plnkr.co/edit/vqtQsJP1dqGnRA6s?preview
--Edited-- --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>
Pass the table
object as an argument to the openModal
function: 将
table
对象作为参数传递给openModal
函数:
<button ng-click="openModal(table)">Select</button>
Use it in the openModal
function: 在
openModal
函数中使用它:
$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 有关更多信息,请参见
While I dont get any error not but I dont get the text returned.
虽然我没有收到任何错误,但是我没有得到返回的文本。
Be sure to furnish objects to the ng-repeat
: 确保为
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',},
];
// });
};
Try to pass the table
to openModal
in your template 尝试将
table
传递给模板中的openModal
<button ng-click="openModal(table)"
Now you can use it as a reference in your openModal
function 现在,您可以在
openModal
函数openModal
其用作参考
$scope.openModal = function (table) {
// table === the clicked table
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.