如何将数据从AngularJS列表传递到Bootstrap模态?

DiPix

在我看来,我有一个项目清单:

<li ng-repeat="fruit in items">
{{fruit.name}} / {{fruit.price}}
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">EDIT</button>
</li>

我想使用引导程序模式来编辑每个产品。这就是为什么我需要将特定产品的数据传递给模态的原因。之后,我将使用将该数据简单地传递到angular脚本ng-click="saveFruit(dataFruit)"saveFruit并将保存数据。

这是我的小提琴:http : //jsfiddle.net/czus6s3a/

有希望的骆马

编辑:完全更改了答案。

单击此处以获取可用的提琴:http : //jsfiddle.net/sn8u7kqe/1/

所做的更改:

在控制器中,我创建了一个$scope.dataFruit = null,以确保变量已初始化。我还创建了一个函数,如下所示:

$scope.setDataFruit = function(fruit) {
    $scope.dataFruit = fruit;
};

这是为了确保我们将水果分配给正确的人$scope

最后,我有你移动<div class="modal">INSIDEdiv其中有ng-controller指令。

控制器仅将其模型(变量和函数等)应用于具有可见性的元素。按照您的原始示例,模态是div的OUTSIDE,因此数据绑定将不会在那里应用。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何将表格数据从角度ui引导程序模态传递到视图

Angular-UI模态-将数据传递到模态

使用Bootstrap将数据从模态传递到父窗口

AngularJS:如何将数据从指令传递到控制器函数

AngularJS:将数据从列表传递到模式

AngularJS将数据传递到引导模态

如何将数据从AngularJS前端传递到Nodejs后端?

AngularJS:如何将数据从引导模态推送到表

Angular 2 ng-bootstrap模式:如何将数据传递到入口组件

如何将输入字段数据从模态传递到react-Native中的容器?

如何将数据传递到Angular ng-bootstrap模态进行绑定

如何将数据传递到ng-bootstrap popover

在Angular 8中,如何将动态数据从可观察对象传递到模态对话框?

如何将状态从模态中的列表选择传递到SwiftUI中的父级

如何将输入到Bootstrap模态(窗体)中的输入中的值传递到HTML表?

如何将列表传递到数据框?

AngularJS如何将数据从控制器传递到指令

如何将数据从控制器传递到数据库以获取列表

如何将数据传递到角度基础模态$ scope?

如何将数据从EJS模板传递到AngularJS控制器

如何将循环值传递给Bootstrap模态?

如何将数据从指令传递到html模板-AngularJS

AngularJS-如何将数据传递到控制器

如何将列表视图数据传递到SQLite数据库?

我如何将变化的数据传递给模态?

如何将选择值传递给Angularjs模态形式

如何将数据从服务传递到控制器AngularJS + Stripe

如何将数组数据从angularjs传递到C#MVC模型?

如何将 django 中的数据输入到模态中?

TOP 榜单

热门标签

归档