AngularJS setting min and max value of the variable

Question

I have some variable which I display just a text and have two buttons to increase or decrease it. I need to set max and min value can go that way. There are a lot of examples for input fields & range filters but I can't figure out how to adapt it to my case (JS/Angular noob here, sorry).

<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>

And this 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>

How to limit this for example to a -10 to +30 range?

Sajeetharan · Accepted Answer · 2018-07-27 14:40:49Z

3

You can handle this with if else condition on ng-click

DEMO

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>

edited Jul 27, 2018 at 14:40

answered Jul 27, 2018 at 14:22

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Pietro Nadalini Over a year ago

I think he wanted it to go down to -10, it would be a minor adjustment

Sajeetharan Over a year ago

@PietroNadalini Did the changes, thanks for the headsup

hurricane · Accepted Answer · 2018-07-27 14:33:02Z

1

You can disable your buttons with using 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>

answered Jul 27, 2018 at 14:33

hurricane

6,7342 gold badges39 silver badges45 bronze badges

1 Comment

hurricane Over a year ago

Who gives a downvote to this simple solution and don't explain why? You man... :)

Collectives™ on Stack Overflow

AngularJS setting min and max value of the variable

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related