Функция запуска при выборе опции angularJS

Question

В настоящее время мои флажки добавляются и вычитаются из общей стоимости. Как я могу заставить мой выбор сделать то же самое? В настоящее время он вводит значение по умолчанию 7700,00, если без поля выбора оно равно 0,00. Также заметил, что мое поле выбора нарушает мою функцию флажка, не вычитая номер при снятии флажка.

Обновлено Fiddle: http://jsfiddle.net/9exaarn2/6/

HTML:

<div ng-app> 
    <div ng-controller="showCrtl"> 
     <input type="checkbox" name="additionalCoverage" ng-click="cost(150, $event.target.checked)"> 
     <label>Add this coverage $150/YR</label> 
     <br> 
     <input type="checkbox" name="additionalCoverage" ng-click="cost(40, $event.target.checked)"> 
     <label>and or this coverage $40/YR</label><br> 

      <select> 
       <option disabled selected>Select one...</option> 
       <option ng-selected="option(200)">add $200/yr</option> 
       <option ng-selected="option(500)">add $500/yr</option> 
      </select> 
     <h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1> 
<span style="color: green; font-size: 45px; line-height: 2;">{{annualCost}}</span> 
     <br> 
    </div> 
</div> 

JS:

function showCrtl($scope) { 
    $scope.dollarAmmount = 0.00; 
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00"; 

    $scope.option = function (amt) { 
     $scope.dollarAmmount = $scope.dollarAmmount + amt; 
     $scope.annualCost = "$" + $scope.dollarAmmount + ".00"; 
     console.log($scope.dollarAmmount) 
    }; 

    $scope.cost = function (amt, checked) { 
     amt *= checked ? 1 : -1; 
     $scope.dollarAmmount = $scope.dollarAmmount + amt; 
     $scope.annualCost = "$" + $scope.dollarAmmount + ".00"; 
     console.log($scope.dollarAmmount) 
    }; 
} 

EDIT: К сожалению, была опечатка в моей скрипкой. Проблема все та же ...

Answer 1

Это ясно, что вы думаете, с мышлением JQuery. Вам нужно практиковать мышление угловатого пути. См. this question and answer для некоторой идеи о том, что это такое.

Первое, что вам нужно на самом деле модели ваша проблема, описывая какие вещи и не столько , как все сделано. Это может показаться расщеплением волос. Это не. Вы должны использовать ng-model для отслеживания ввода формы, а не для кликов.

Вот код контроллера, к которому вы должны стремиться .. обратите внимание, как totalCost определяется как сумма расходов на покрытие.а не какое-то значение, которое вы манипулируете вручную пользователь изменяет ваша форма:

function showCrtl($scope) { 
    $scope.coverage = []; 
    $scope.totalCost = function(){ 
     return $scope.coverage.reduce(function(sum, cost){ 
      return sum + parseInt(cost); 
     },0); 
    }; 
} 

А вот шаблон (обратите внимание, что я удалил имена входных и нажмите обработчик ... вам не нужны их!):

<input type="checkbox" ng-model="coverage[0]" ng-true-value="150" ng-false-value="0"> 
<label>Add this coverage $150/YR</label> 
<br> 
<input type="checkbox" ng-model="coverage[1]" ng-true-value="40" ng-false-value="0"> 
<label>and or this coverage $40/YR</label><br> 
<select ng-model="coverage[2]"> 
    <option disabled selected>Select one...</option> 
    <option ng-value="200">add $200/yr</option> 
    <option ng-value="500">add $500/yr</option> 
</select> 
<h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1> 
<span style="color: green; font-size: 45px; line-height: 2;"> 
{{totalCost() | currency}} 
</span> 

Также обратите внимание на использование currency. Это называется фильтром. Он используется для форматирования числа в формате $ 0.00. Форматирование - это ответственность, обычно обрабатываемая представлением, а не контроллером или моделью.

Отъезд the working fiddle.

Если вам интересно, мы можем немного поработать и улучшить модель. Вы видите, как затраты на покрытие дублируются в шаблоне (один для отображения, один в ng-value)? Мы можем переписать контроллер и посмотреть, так что модель приложения (ваши варианты покрытия) представлены только в одном месте:

Контроллер:

function showCrtl($scope) { 
    $scope.coverageCosts = []; 
    $scope.totalCost = function(){ 
     return $scope.coverageCosts.reduce(function(sum, cost){ 
      return sum + parseInt(cost); 
     },0); 
    }; 
    $scope.primaryCoverageOptions = [150,40]; 
    $scope.specialCoverageOptions = [200, 500]; 
} 

В будущем ваш coverageOptions может исходить от вашей задней части с помощью AJAX ($http.get) или могут отличаться в зависимости от графика. Теперь, когда информация была извлечена из вашего представления, вы можете изменить ее более свободно.

Шаблон:

<div ng-app> 
    <div ng-controller="showCrtl"> 
     <div ng-repeat="option in primaryCoverageOptions"> 
      <label> 
      <input type="checkbox" ng-model="coverageCosts[$index]" ng-true-value="{{option}}" ng-false-value="0"/> 
      Add this coverage {{option | currency}}/YR 
      </label>     
     </div> 
     <select ng-model="coverageCosts[2]"> 
      <option disabled selected>Select one...</option> 
      <option ng-repeat="option in specialCoverageOptions" ng-value="option"> 
       {{option | currency}} 
      </option> 
     </select> 
     <h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1> 
     <span style="color: green; font-size: 45px; line-height: 2;"> 
     {{totalCost() | currency}} 
     </span> 
     <div> 
      Selected coverage costs: {{coverageCosts}} 
     </div> 
     <br> 
    </div> 
</div> 

Теперь нет дублированных данных в представлении ... все данные поступают от контроллера. Это хорошая практика.

Updated fiddle

Answer 2

Вот решение

<div ng-app> 

Добавить 150 это покрытие $/YR
и или это покрытие $ 40/YR

<select ng-selected="option()" ng-model="sel"> 
    <option disabled selected>Select one...</option> 
    <option value="200">add $200/yr</option> 
    <option value="500">add $500/yr</option> 
</select> 
<h1 class="annualCost">TOTAL ANNUAL COST<br>OF HOME WARRANTY</h1> 
<span style="color: green; font-size: 45px; line-height: 2;">{{annualCost}}</span> 
<br> 

и для JS,

function showCrtl($scope) { 
$scope.sel =0; 
$scope.dollarAmmount = 0.00; 
$scope.annualCost = "$" + $scope.dollarAmmount + ".00"; 

$scope.option = function() { 
    $scope.dollarAmmount = $scope.dollarAmmount + $scope.sel; 
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00"; 
    console.log($scope.dollarAmmount) 
}; 

$scope.cost = function (amt, checked) { 
    amt *= checked ? 1 : -1; 
    $scope.dollarAmmount = $scope.dollarAmmount + amt; 
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00"; 
    console.log($scope.dollarAmmount) 
}; 

}

Answer 3

Вы можете просто связать $ охват модель выбрать, то смотреть его значение .. после каждого изменения вступили различия старого и нового значения и добавить это к totalAmount ...

$scope.$watch('selectedValue', function(newValue, oldValue){ 
    $scope.dollarAmmount = $scope.dollarAmmount + (newValue - oldValue); 
    console.log($scope.dollarAmmount) 
    $scope.annualCost = "$" + $scope.dollarAmmount + ".00"; 
}) 

здесь ваш обновленный JSFIDDLE ...

ПРИМЕЧАНИЕ !!: Вы должны инициализировать переменную в вашей области видимости в противном случае первое значение е будет неопределенным нарушающий ваш алгоритм ...

$scope.selectedValue = 0;