Increase Angular variable when an input box is checked

Question

I am creating a small price calculator on my website where the user selects the services he needs. As he selects his services the price is updated accordingly.

ANGULAR

$scope.price = 0;

HTML

<h4> What features would you like? </h4>
    <input type="checkbox" value="feature 1" ng-checked="price = price + 5">
    <input type="checkbox" value="feature 2" ng-checked="price = price + 25">
    <input type="checkbox" value="feature 3" ng-checked="price = price + 50">


<h4> Would you like your project to include X? </h4>
    <input type="radio" name="feature" value="yes" ng-checked="price = price + 10">
    <input type="radio" name="feature" value="no" selected>

<h5> We think your project will cost around ${{price}} </h5>

As you can see from the example, once the user clicks an option, it will add a value to the price variable, but will take the value away if deselected. Ng-checked doesn't work though. How can I do this?

Thanks!

ng-checked docs.angularjs.org/api/ng/directive/ngChecked Hence the expression should be conditional. — bhantol
– bhantol, Commented Dec 30, 2016 at 0:13

Michael Sacket · Accepted Answer · 2016-12-30 00:30:55Z

I suggest setting up a different model. Trying to track the price within the checked/unchecked state will be difficult.

Angular

$scope.product = {
    price: 0,
    feature: {
        price: 10
        checked: false
    },
    feature1: {
        price: 5
        checked: false
    },
    feature2: {
        price: 25
        checked: false
    },
    feature3: {
        price: 50
        checked: false
    }
};

$scope.getPrice = function(feature_id){
    var feature = $scope.product[feature_id];
    return feature.checked ? feature.price : 0;
};

$scope.updatePrice = function(){
    $scope.product.price = $scope.getPrice('feature')
        + $scope.getPrice('feature1')
        + $scope.getPrice('feature2')
        + $scope.getPrice('feature3');
};

HTML

<h4> What features would you like? </h4>
<input type="checkbox" name="feature1" ng-model="product.feature1.checked" ng-clicked="updatePrice()">
<input type="checkbox" name="feature1" ng-model="product.feature2.checked" ng-clicked="updatePrice()">
<input type="checkbox" name="feature1" ng-model="product.feature3.checked" ng-clicked="updatePrice()">


<h4> Would you like your project to include X? </h4>
<input type="radio" name="feature" ng-value="true" ng-model="product.feature.checked" ng-clicked="updatePrice()">
<input type="radio" name="feature" ng-value="false" ng-model="product.feature.checked" ng-clicked="updatePrice()">

<h5> We think your project will cost around ${{product.price}} </h5>

bhantol · Accepted Answer · 2016-12-30 00:56:59Z

You could handle like working plnkr

ng-checked is for indicating if it is checked so that won't work. Also ng-checked should not be used along with ng-model. We have used pure ng-model.

  <h4> What features would you like? </h4>
    <label>Feature 1 <input type="checkbox" value="true" ng-model="features.feature1" /></label><br>
    <label>Feature 2 <input type="checkbox" value="true" ng-model="features.feature2" /></label><br>
    <label>Feature 3 <input type="checkbox" value="true" ng-model="features.feature3" /></label><br>
 <h4> Would you like your project to include X? </h4>
    <label> FeatureX</label>
    <input type="radio" name="feature" ng-value="true" ng-model="features.featureX" />
    <input type="radio" name="feature" ng-value="false" ng-model="features.featureX" />
 <h5> We think your project will cost around ${{ calculatePrice() }} </h5>

And in the controller

myApp.controller('demoCtrl', function($scope) {
  $scope.features = {
    featureX: false,
    feature1: false,
    feature2: false,
    feature3: false

  };

  $scope.calculatePrice = function() {
    $scope.price = 0;
    $scope.price = $scope.features.feature1 === true ? $scope.price + 5 : $scope.price;
    $scope.price = $scope.features.feature2 === true ? $scope.price + 25 : $scope.price;
    $scope.price = $scope.features.feature3 === true ? $scope.price + 50 : $scope.price;
    $scope.price = $scope.features.featureX === true ? $scope.price + 10 : $scope.price;
    return $scope.price;
  };
});

Massi Issar · Accepted Answer · 2016-12-30 00:18:23Z

0

Use ng-true-value and ng-false-value instead of ng-checked.

ngTrueValue : The value to which the expression should be set when selected.

ngFalseValue : The value to which the expression should be set when not selected.

answered Dec 30, 2016 at 0:18

Massi Issar

4035 silver badges23 bronze badges

2 Comments

Ben L Over a year ago

When I use: <input id="check2" ng-true-value="price = price + 40" type="checkbox" name="check" value="check2"> It doesn't work. It only sets "price" to 40 even before I check it.

Ben L Over a year ago

Can you show me how I would use this to work with my situation?

Collectives™ on Stack Overflow

Increase Angular variable when an input box is checked

3 Answers 3

Angular

HTML

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Angular

HTML

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related