AngularJS設置變量的最小值和最大值

Question

我有一些僅顯示文本的變量，並且具有兩個按鈕來增加或減少它。 我需要設置最大值和最小值可以這樣。 輸入字段和范圍過濾器有很多示例，但是我不知道如何使它適應我的情況（JS / Angular noob，抱歉）。

<script type="text/javascript">
    var airApp = angular.module('airApp', []);
    airApp.controller('dataShow', function($scope, $http, $filter) {
        $scope.init = function() {
            $scope.temp = +23.0; // Will be $http.request actually
        }
    });
</script>

和這個HTML：

    <div class="container" align="center">
        <div class="page-header">
            <h1>Control</h1>
        </div>
        <div ng-app="airApp" ng-controller="dataShow" ng-init="init()" class="panel-body">
            <h1>
                {{temp > 0 ? '+' : ''}}{{temp | number : 1}}
                <button name="plus" ng-click="temp = temp + 0.5" class="btn btn-primary">+</button>
                <button name="minus" ng-click="temp = temp - 0.5" class="btn btn-primary">-</button>
            </h1>
        </div>
    </div>

如何將其限制在例如-10到+30范圍內？

Answer 1

您可以使用ng-click上的if else條件來處理此問題

演示

 var app = angular.module('testApp',[]) app.controller('dataShow', function($scope) { $scope.init = function() { $scope.temp = +23.0; } });

 <!DOCTYPE html> <html ng-app="testApp"> <head> <script data-require="angular.js@*" data-semver="4.0.0" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.10/angular.min.js"> </script> <link rel="stylesheet" href="style.css" /> <script src="script.js"></script> </head> <body ng-controller="dataShow"> <div class="container" align="center"> <div class="page-header"> <h1>Control</h1> </div> <div ng-app="airApp" ng-controller="dataShow" ng-init="init()" class="panel-body"> <h1> {{temp > 0 ? '+' : ''}}{{temp | number : 1}} <button name="plus" ng-click=" (temp<30 ? temp = temp +0.5 : temp =30)" class="btn btn-primary">+</button> <button name="minus" ng-click="(temp>-10 ? temp = temp- 0.5 : temp =-10)" class="btn btn-primary">-</button> </h1> </div> </div> </body> </html>

Answer 2

您可以使用ng-disabled禁用按鈕。

<button ng-disabled="(temp + 0.5) > 30" name="plus" ng-click="temp = temp + 0.5" class="btn btn-primary">+</button>
<button ng-disabled="(temp - 0.5) < -10" name="minus" ng-click="temp = temp - 0.5" class="btn btn-primary">-</button>

AngularJS設置變量的最小值和最大值

問題描述

2 個解決方案

解決方案1
3 已采納 2018-07-27 14:22:47

解決方案2
1 2018-07-27 14:33:02

AngularJS設置變量的最小值和最大值

問題描述

2 個解決方案

解決方案1 3 已采納 2018-07-27 14:22:47

解決方案2 1 2018-07-27 14:33:02

解決方案1
3 已采納 2018-07-27 14:22:47

解決方案2
1 2018-07-27 14:33:02