Есть селект, который содержит в себе список товаров. У каждого товара своя цена. При выборе товара, необходимо цену товара прибавить к общей цене. При этом товаров может быть несколько, поэтому количество селектов регулируется отрисовал через ng-repeat. На самом селекте используется ng-options для отрисовки товаров в списке. Проблема в том, что при выборе товара в селекте, этот объект не попадает в $scope родительского элемента. Не пойму как решить.
<div ng-controller="ContactController">
<div ng-repeat="item in featuresSelect track by $index" class="col-xs-12">
<div class="row">
<div class="col-xs-12 col-sm-9">
<select ng-change="calcBudget()" name="budget" id="budget" ng-options="option as option.value for option in featuresOptions track by option.budget"
ng-model="selectedOption" required="required" style="width: 100%; height: 3.5vw; color: #a9a9a9; padding: 10px 10px 10px 10px;">
</select>
</div>
<div class="col-xs-12 col-sm-3 aligner">
<div ng-if="$index == featuresSelect.length-1" class="btn btn_input btn_add" ng-click="addInput(featuresSelect, $index)"></div>
<div ng-if="featuresSelect.length > 1" class="btn btn_input btn_remove" ng-click="removeInput(featuresSelect, $index)"></div>
</div>
</div>
</div>
<p>Selected option: {{selectedOption}} </p>
<p>Total Price: {{price}}</p>
</div>
angular.module('WaikomWeb', []).controller('ContactController', function ($scope) {
$scope.featuresSelect = [0];
$scope.featuresOptions = [{
value: "Custom Camera",
budget: "4500"
}, {
value: "User posts",
budget: "300"
}, {
value: "Face Recognition",
budget: "10000"
}, {
value: "Video/Audio calls",
budget: "700"
}, {
value: "Video/Audio playing",
budget: "200"
}];
$scope.selectedOption ={};
$scope.price = 0;
$scope.addInput = function (array, index) {
index++;
array.push(index);
}
$scope.removeInput = function (array, index) {
array.splice(index, 1);
}
$scope.calcBudget = function () {
$scope.price += $scope.selectedOption.budget;
}
});
UPD Живой пример
plnkr.co/edit/kzwP6M2D3IP0K3bsKaf8?p=preview