コントローラからフォームにモデルを返すAngular.js

Question

以下のコードを見ることができます。

var app = angular.module("appX", []); 
 
console.log(app); 
 
app.controller("orderController", function($scope) { 
 
\t \t $scope.printOption = function(option) { 
 
\t \t  var split = option.split('_'); 
 
\t \t  $scope.quantity = split[0]; 
 
\t \t  $scope.unitPrice = split[1]; 
 
\t \t  $scope.total = split[0] * split[1]; 
 
\t \t  console.log($scope.total); 
 
\t \t } 
 
\t \t });

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

Angular.js新しい私はドロップダウンの数と形を持っています。それぞれが選択した値を角度コントローラに渡します。私は、データを解析し、フォームに必要な情報を戻すことができます。しかし、フォームにはいくつかのドロップダウンがあり、ドロップダウンごとに適切な合計値を提供したいだけです。

Answer 1

console.jsというライブラリがあります。これは、JSFiddleのDOMにコンソール出力を表示しています。下の例のようにすべてconsole.log()をコメントアウトするか、ライブラリを削除してください！、以下のフィドルを参照してください。

var app = angular.module("appX", []); 
 
//console.log(app); 
 
app.controller("orderController", function($scope) { 
 
\t \t $scope.printOption = function(option) { 
 
\t \t  var split = option.split('_'); 
 
\t \t  $scope.quantity = split[0]; 
 
\t \t  $scope.unitPrice = split[1]; 
 
\t \t  $scope.total = split[0] * split[1]; 
 
\t \t  //console.log($scope.total); 
 
\t \t } 
 
\t \t });

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