Question

我正在使用离子框架创建一个计数应用程序。我有一个带有预定义数字（在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;
}

然后，如果您希望该数字>＆gt; = 0，则只需添加if规则来管理该案例

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

角度中的非负数字按钮

1 个答案: