Question

您可以在下面看到我的代码。

＆＃13;

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);
		  }
		});

＆＃13;

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

＆＃13;

Angular.js新手我有一个包含多个下拉列表的表单。每个都将选定的值传递给我的Angular Controller。我能够解析数据并将一些必要的信息返回给表单。但是，我在表单中有一些下拉菜单，我想只为每个下拉列表提供相应的选择总值。

Answer 1

有一个名为console.js的库，它在您提供的JSFiddle中显示DOM中的控制台输出。您可以注释掉所有console.log()，如下例所示，或删除库！，请参阅下面的小提琴。

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>

Angular.js将模型从控制器返回到表单

1 个答案: