Question

我是网络开发的新手，已经开始创建自己的网站了。我的一个朋友告诉我角度的基础知识，所以我试图用它。我的想法是创建一个用户可以使用的家居用品（主要是食物）的库存（当他们做饭时），然后添加到他们的购物清单，然后购买，这将增加他们对该项目的数量。

无论如何，我的问题是：我有一份食物清单（肉，牛奶，面粉）。每种食物下方有2个按钮 - 使用，添加到购物清单。我想要发生的事情如下：当用户点击属于某种食物的“使用”时（比如面粉），会弹出一个模态，询问用户他们使用了多少百分比的食物。

一旦用户输入有效金额，数据（食物+使用的金额）就会传递给一个函数，该函数将处理后端数据的更新。什么是“有角度”的方式来做到这一点？我想出了一个基本上就是这样的解决方案 -

单击“使用”将触发一个函数，传递相关的食物名称。我将这个foodname保存在变量$ scope.actualFood中。然后，我显示一个模态，询问用户使用了什么百分比。然后，我应该能够（当用户点击“Okay”时）能够使用表单ID从表单中提取该百分比。然后，我将同时使用食物和百分比。但我觉得这是一种非常低效的方法。

任何提示将不胜感激！我已经附上下面的食物清单的HTML以获得额外的澄清

 <div id="foodDataList" class="container">
                <div class="row">
                    <div class="col-md-3" ng-repeat="food in message track by $index">
                        <div class="card" ng-click="callsomething(food)">
                            <img width="100%" ng-src="{{food.imageURL}}" alt="Food icon"/>
                            <div class="inside-of-img" style="text-align: center;">
                            </div>
                    </div>
                        <div class="card-body">
                            <h4 class="card-title"> <strong>{{food.foodName}} <strong></h4>
                            <h4>You have this much:</h4>
                            <progress value="70" max="100">70%</progress>
                            <div class="btn-group">
                                <button type="button" ng-click="useFood(food.foodName)" class="btn btn-danger">Use</button>
                                <button type="button" ng-click="addToShoppingList(food.foodName)" class="btn btn-primary">Add To Shopping List</button>
                             </div>
                        </div>
                    </div>

Angular - 将按钮点击的输入与模态数据相结合？

0 个答案: