WhatIsHTML
@WhatIsHTML
HTML программист

Почему не работает ng-options внутри ng-repeat?

Есть селект, который содержит в себе список товаров. У каждого товара своя цена. При выборе товара, необходимо цену товара прибавить к общей цене. При этом товаров может быть несколько, поэтому количество селектов регулируется отрисовал через 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
  • Вопрос задан
  • 196 просмотров
Пригласить эксперта
Ответы на вопрос 1
miraage
@miraage
Старый прогер
ngRepeat создает новый $scope.
Используйте компоненты или "controller as" синтаксис, и вообще не завязывайтесь на $scope.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы