CODEWITHSUNDEEP
angularjsforms
steverh
steverh

Reputation: 31

Angular.js returning a model from a controller to a form

You can see my code below.

var app = angular.module("appX", []);
console.log(app);
app.controller("orderController", function($scope) {
		  $scope.printOption = function(option) {
		    var split = option.split('_');
		    $scope.quantity = split[0];
		    $scope.unitPrice = split[1];
		    $scope.total = split[0] * split[1];
		    console.log($scope.total);
		  }
		});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgit.com/eu81273/jsfiddle-console/master/console.js"></script>
<div ng-app="appX" ng-controller="orderController">
  <div >
    <form action="" method="POST" role="form">
      <select ng-name="optionOne" class="form-control" ng-change="printOption(optionOne)" ng-model="optionOne">
        <option value="">Select</option>
        <option value="1_12">1 for $12</option>
        <option value="2_22">2 for $22</option>
        <option value="3_29">3 for $29</option>
        <option value="4_35">4 for $35</option>
        <option value="5_40">5 for $40</option>
        <option value="6_45">6 for $45</option>
        <option value="7_50">7 for $50</option>
        <option value="8_55">8 for $55</option>
        <option value="9_60">9 for $60</option>
      </select>
    </form>
  </div>
  <div class="col" ng-show="total>0">Total for 8x10 Team and 1 - Individual Photo = {{total | currency}}</div>
  
</div>

New to Angular.js I have a form with a number of dropdowns. Each one passes a selected value to my Angular Controller. I'm able to parse the data and return some of the necessary information back to the form. however, I have a number of dropdowns in the form and I want to only provide the appropriate total value of the selection for each dropdown.

Upvotes: 2

Views: 38

Answers (1)

Naren Murali
Naren Murali

Reputation: 56886

There is a library called console.js which is showing the console output in the DOM in the JSFiddle you provided. You can just comment out all the console.log() as in the below example or remove the library!, Refer the below fiddle.

var app = angular.module("appX", []);
//console.log(app);
app.controller("orderController", function($scope) {
		  $scope.printOption = function(option) {
		    var split = option.split('_');
		    $scope.quantity = split[0];
		    $scope.unitPrice = split[1];
		    $scope.total = split[0] * split[1];
		    //console.log($scope.total);
		  }
		});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="appX" ng-controller="orderController">
  <div >
    <form action="" method="POST" role="form">
      <select ng-name="optionOne" class="form-control" ng-change="printOption(optionOne)" ng-model="optionOne">
        <option value="">Select</option>
        <option value="1_12">1 for $12</option>
        <option value="2_22">2 for $22</option>
        <option value="3_29">3 for $29</option>
        <option value="4_35">4 for $35</option>
        <option value="5_40">5 for $40</option>
        <option value="6_45">6 for $45</option>
        <option value="7_50">7 for $50</option>
        <option value="8_55">8 for $55</option>
        <option value="9_60">9 for $60</option>
      </select>
    </form>
  </div>
  <div class="col" ng-show="total>0">Total for 8x10 Team and 1 - Individual Photo = {{total | currency}}</div>
  
</div>

Upvotes: 1

Related Questions