Add checkbox in form AngularJS

Question

I'm in need of your help. I just starting working with AngularJS and I have encountered a problem with code that is written in Boostrap see snippet.

There is a form and below it I need to add something a few options simillar to radio buttons/check box.

EXAMPLE: So first you pick one or more items from the existing form, and then below it you can choose one of those 2-3 checkboxes. After selecting those, it all sums up in the Total Cost.

View image >>> https://s18.postimg.org/chgy451ix/Screenshot_1.png

var myApp = angular.module("MyApp", []);
myApp.controller("MyCtrl", function($scope){
 $scope.menuCard = [
			{item: "Egg and Cheese", cost:30, active:true},
			{item: "Breakfast Sandwich", cost:400, active:false},
			{item: "Blueberry Pancakes", cost:250, active:false},
			{item: "Cheese Omelet ", cost:220, active:false},
			];	
 $scope.total = 30;
  $scope.toggleActive = function(c)
			{
				c.active = !c.active;				 
				if(c.active)
				{
					$scope.total += c.cost;
				}else
				{
					$scope.total -= c.cost;
				}
			}
});

body{font:20px/1.3 'Open Sans', sans-serif; color: #5e5b64; margin:0; padding:0;}	

.container{
  margin-top:50px;
  
}

span{float:right;}

<html data-ng-app = "MyApp">
<head>
  <title>AngularJS - DataBinding</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  
 </head>
 <body data-ng-controller = "MyCtrl">
  
   <div class = "container">
     <div class = "row">
       
       <div class = "col-md-4 col-md-offset-3">
           <h2 class = "text-center"><strong>Order Form</strong></h2>
           <div class="list-group">
            <button type="button" class="list-group-item" data-ng-repeat = "item in menuCard"  data-ng-click = "toggleActive(item)"   ng-class="{active:item.active}">{{item.item}}<span>{{ item.cost | currency }}</span></button>
          </div>
         <hr/>
         
         <div class="alert alert-success" role="alert">Total Cost: <span>{{ total | currency }}</div>
           
       </div>
       
      
        
     </div>
   </div>
   
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   
   <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
 </body>

</html>

@gunr2171 I add code

Jasmin Ljima
– Jasmin Ljima

2016-12-07 19:57:33 +00:00
Commented Dec 7, 2016 at 19:57 — Jasmin Ljima
– Jasmin Ljima, Commented Dec 7, 2016 at 19:57
which answer helped you?

Aravind
– Aravind

2016-12-12 16:08:34 +00:00
Commented Dec 12, 2016 at 16:08 — Aravind
– Aravind, Commented Dec 12, 2016 at 16:08

Naghaveer R · Accepted Answer · 2016-12-09 05:30:28Z

1

You can use radio buttons

<div ng-repeat="lang in languages">
    <input type="radio" name="selectedLang" ng-model="$parent.selectedLang" ng-value="lang" />{{lang}}
  </div>

var myApp = angular.module("MyApp", []);
myApp.controller("MyCtrl", function($scope){
 $scope.menuCard = [
			{item: "Egg and Cheese", cost:30, active:true},
			{item: "Breakfast Sandwich", cost:400, active:false},
			{item: "Blueberry Pancakes", cost:250, active:false},
			{item: "Cheese Omelet ", cost:220, active:false},
			];	
 $scope.total = 30;
$scope.languages=[{"language":"German","cost":40},{"language":"French","cost":50},{"language":"Euro","cost":30}];
  $scope.toggleActive = function(c)
			{
				c.active = !c.active;				 
				if(c.active)
				{
					$scope.total += c.cost;
				}else
				{
					$scope.total -= c.cost;
				}
			}
});

body{font:20px/1.3 'Open Sans', sans-serif; color: #5e5b64; margin:0; padding:0;}	

.container{
  margin-top:50px;
  
}

span{float:right;}

<html data-ng-app = "MyApp">
<head>
  <title>AngularJS - DataBinding</title>
  <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  
 </head>
 <body data-ng-controller = "MyCtrl">
  
   <div class = "container">
     <div class = "row">
       
       <div class = "col-md-4 col-md-offset-3">
           <h2 class = "text-center"><strong>Order Form</strong></h2>
           <div class="list-group">
            <button type="button" class="list-group-item" data-ng-repeat = "item in menuCard"  data-ng-click = "toggleActive(item)"   ng-class="{active:item.active}">{{item.item}}<span>{{ item.cost | currency }}</span></button>
          </div>
         <hr/>
         <label style="display: inline-block;" ng-repeat="lang in languages">
<input type="radio" name="selectedLang" ng-model="$parent.selectedLang" ng-value="lang" />{{lang.language}}
  </label>
         
         <div class="alert alert-success" role="alert">Total Cost: <span>{{ total + selectedLang.cost | currency }}</div>
           
       </div>
       
      
        
     </div>
   </div>
   
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
   
   <!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" ></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js"></script>
 </body>

</html>

edited Dec 9, 2016 at 5:30

answered Dec 7, 2016 at 20:33

Naghaveer R

2,9424 gold badges33 silver badges53 bronze badges

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

4 Comments

Jasmin Ljima Over a year ago

Thank you very much, this is almost what I was looking for, but there is one small problem, I believe that you know make it. "Total sum", I want to be one digit, ie, the sum of all the digits that are selected. Here I see next to the radio button "{"language":"German","cost":40}" ; Could this not to see? I just want to write, "German language" not to write in parentheses?

Jasmin Ljima Over a year ago

Thank you very much! This is 99% of what I wanted, just one more question. Radio button, whether they be "inline", that are next to each other.

Naghaveer R Over a year ago

@JasminLjima Change radio button "div" to "label" tag and add style="display: inline-block;"

Jasmin Ljima Over a year ago

I still need help about this, look >>> s30.postimg.org/innmht4gx/Screenshot_2.png

Aravind · Accepted Answer · 2016-12-08 04:08:52Z

0

I would suggest you with this!

<div class="row">
    <div ng-repeat="lang in languages">
        <div class="col-sm-3">
            <input type="radio" name="selected" ng-model="$parent.selectedLang" ng-value="lang" />
            <div class="row">
                <div class="col-sm-1">
                    {{lang.language}}
                </div>
            </div>
            <div class="row">
                <div class="col-sm-1">
                    {{lang.cost}}
                </div>
            </div>
        </div>
    </div>
</div>

The total will look like

<div class="alert alert-success" role="alert">Total Cost:
    <span>{{ total + selected.cost | currency }}</span>
</div>

and the controller will look like

$scope.languages = [{
    "language": "German",
    "cost": 40
  }, {
    "language": "French",
    "cost": 50
  }, {
    "language": "Euro",
    "cost": 30
  }];

Add these to your css

input[type="radio"] {
    -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
    -moz-appearance: checkbox;    /* Firefox */
    -ms-appearance: checkbox;     /* not currently supported */
}

Update 1: added the item name and cost + language and cost as expected in the comment.

Modification is here

 <div class="alert alert-success" role="alert">Total Cost:

        {{selectedproduct.item}} &nbsp; $ {{selectedproduct.cost}}
        + {{selected.language}} &nbsp; $ {{selected.cost}}
          <span>{{ total + selected.cost | currency }}
         </span>
        </div>

and the same is updated in the plunker.

Here is the live DEMO in plunker

edited Dec 8, 2016 at 4:08

answered Dec 7, 2016 at 21:01

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

3 Comments

Jasmin Ljima Over a year ago

This is exactly what I needed! But there's a problem, when I checks, for example, "German" , it will not change the total sum, for example: egg and cheese $30 + German $40 = $70

Jasmin Ljima Over a year ago

- Did I give a failing grade or someone else? If I am, I'm sorry, please, not on purpose, I just started using this page, still all investigating and click. Please help me, and tell me how to change it!? I hope you understand me, I'm a beginner!

Jasmin Ljima Over a year ago

When I click on up arrow it writes >>> s15.postimg.org/c6sw0xxi3/Screenshot_1.png

Collectives™ on Stack Overflow

Add checkbox in form AngularJS

2 Answers 2

4 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related