数字未通过 select / angular v1 解析

Question

我的 "value" 字段在我的 select 字段中，应该从我的控制器中的对象数组中提取价格。但他们没有....我正在尝试运行 ng-change 上的一个函数，以计算饮料价值 + 额外价值...但这不起作用。

我得到空白和 NaN。不确定我做错了什么，或者我是否正确访问了价格，但函数本身应该可以工作..

我有两个 select 字段，它们在我的控制器中显示此数据：

function myCtrl($scope) {
console.log('myCtrl loaded!');

$scope.drinks = [
{id: '0', type: 'latte', text: 'latte', price: 2.50},
{id: '1', type: 'cappucino', text: 'cappucino', price: 2.50 },
{id: '2', type: 'tea', text: 'tea', price: 3.00 },
{id: '3', type: 'flatwhite', text: 'flat white', price: 2.50 },
{id: '4', type: 'coffee', text: 'coffee', price: 2.00 }
];

$scope.extras = [
{id: '1', type: 'latte && cappucino && flatwhite && coffee', text: 'Extra Shot', price: 1.00 },
{id: '2', type: 'latte && cappucino && flatwhite && coffee', text: 'Chocolate', price: 0.50 },
{id: '3', type: 'latte && cappucino && flatwhite && coffee', text: 'Vanilla', price: 0.50 },
{id: '4', type: 'latte && cappucino && flatwhite && coffee', text: 'Caramel', price: 0.50 },
{id: '5', type: 'latte && cappucino && flatwhite && tea', text: 'Mint', price: 0.50 },
{id: '6', type: 'latte && cappucino && flatwhite && coffee && tea', text: 'Ginger', price: 0.50 },
{id: '7', type: 'latte && cappucino && flatwhite && coffee && tea', text: 'Honey', price: 0.50 }
];

这是我的 index.html 中的 select 字段：

 <div class="column is-half">
  <div ng-controller="myCtrl">

    <select ng-model="selectedTypeName" ng-options="drink.type as drink.text for drink in drinks" value="drink.price" ng-change="drinkValue(value)">
    </select>

    <select ng-model="selectedName" value="extra.price" ng-options="extra.id as extra.text for extra in extras|filter:{type:selectedTypeName}" ng-change="extraValue(value)">
    </select>

  </div>
</div>

这里是求和函数，我运行在同一个控制器中....

  // DRINK VALUE CALCULATE
 $scope.drinkValue = function(value) {
const drinkValue = value;
$scope.order = drinkValue;
console.log('first drop down clicked' + drinkValue);


// EVENT VALUE CALCULATE
$scope.extraValue = function(value) {
  const extraValue = Number(value);
  $scope.extraOrder = extraValue.toFixed(2);
  console.log('extra selected is ' + extraValue);

  // TOTAL CALCULATE
  $scope.total = drinkValue + extraValue;
  console.log('final total is ' + $scope.total);
};
};
}

有什么想法吗？

Answer 1

我认为您仍在学习，一个有用的提示是使用控制台或打印值以查看导致问题的原因；

http://plnkr.co/edit/CoOXBnfd21wFentfSdH5?p=preview

<!DOCTYPE html>
<html>

  <head>
    <script src="//unpkg.com/angular/angular.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="ctrl">
    <select ng-model="selectedDrink"
            ng-options="drink as drink.text for drink in drinks"
            value="drink.price" ng-change="drinkValue(selectedDrink.price)">
    </select>

    <select ng-model="selectedExtra" value="extra.price"
            ng-options="extra as extra.text for extra in extras|filter:{type:selectedDrink.type}"
            ng-change="extraValue(selectedExtra.price)">
    </select>
   </body>

</html>

数字未通过 select / angular v1 解析

Numbers not parsing through select / angular v1

html-select

sum

angularjs