angular 中的非负数按钮

Question

我正在使用 ionic 框架创建一个计数应用程序。我有一个带有预定义数字（在 services.js 中）的正按钮和一个具有相同预定义数字的相应负数以减去该数字。这是模板代码；

<a class="item list-inset item-thumbnail-left item item-button-right">
                    <img ng-src=" {{ menu.imgsrc1 }} ">
                    <h2>{{ menu.foodItem1 }}</h2>
                    <p>{{ menu.data1 }}</p>
                    <button id="plus" class="button button-icon icon round-button" ng-click="count = count + {{ menu.calories1 }} "> {{ menu.calories1 }} </button>
                    <button id="minus" class="button button-icon icon round-button" ng-click="count = count - {{ menu.calories1 }} "> - </button>
                </a>

这是服务代码；

        var menus = [
                {
                    title: 'Breakfast',
                    foodItem1: "Cereal",
                    data1: 'Calories per 250g serving',
                    imgsrc1: "img/almond.jpg",
                    calories1: 17,
                    foodItem2: "Bread",
                    data2: 'Calories per wholegrain slice',
                    imgsrc2: "img/almond.jpg",
                    calories2: 25,
                    foodItem3: "Pastries",
                    data3: 'Calories per piece',
                    imgsrc3: "img/almond.jpg",
                    calories3: 75
                },
                {
                    title: 'Lunch',
                    description: 'Wrap, Sandwich, Soup...',
                    foodItem1: 'Wrap',
                    data1: 'Calories per wholegrain wrap',
                    imgsrc1: "img/almond.jpg",
                    calories1: 567,
                    foodItem2: "Sandwich",
                    data2: 'Calories per brown slice',
                    imgsrc2: "img/almond.jpg",
                    calories2: 567,
                    foodItem3: "Chicken soup",
                    data3: 'Calories per 250ml bowl',
                    imgsrc3: "img/almond.jpg",
                    calories3: 567
                }
      ];

我不希望负数低于零。我的理解是，我需要使用 Math.floor() 方法来抵消按钮进入负区，但我如何在不损害现有内容的情况下编写它。我需要另一个控制器吗？

Answer 1

我试着理解你的期望：您不希望该数字 count = count - {{ menu.calories1 }} 为负数？

首先，我从不向 HTML 添加数据操作。我调用了具有数据操作功能的控制器。

例如这个：

     <button id="minus" class="button button-icon icon round-button" ng-click="count = count - {{ menu.calories1 }} "> - </button>

将更改为

     <button id="minus" class="button button-icon icon round-button" ng-click="removeCal(menu.calories1)"> - </button>

并在您的控制器中创建 removeCal 函数

$scope.removeCal = function(val) {
   $scope.count -= val;
}

然后，如果您希望该数字始终 >= 0，只需添加一个 if 规则来管理该情况

 $scope.removeCal = function(val) {
   $scope.count -= val;
   if($scope.count <0)
      $scope.count = 0;
}

angular 中的非负数按钮

Non-negitive number button in angular

html

ionic-framework

ionic