Один объект области видимости для нескольких раскрывающихся списков пользовательского интерфейса

Question

У меня есть небольшие трудности с использованием пользовательского интерфейса на угловой. Я хочу заполнить три раскрывающихся списка для имени, имени и третьего имени, используя один и тот же объект области действия пользователей. Похоже, угловой не нравится

Вот мой контроллер выглядит так: изначально я только назначил переменную $ scope.members и пытаюсь заполнить раскрывающийся список, используя тот же объект, но выбор первого также выбирает другой. Поэтому я решил присвоить его трем различным объектам, но он все еще делает то же самое..

memberService.getAllMembers().then(function (data) {
       $scope.members_first_name = data;
       $scope.members_second_name = data;
       $scope.members_third_name = data;
    });

Вот мой HTML..

<!-- First Name -->
                <div class="form-group required" ng-class="{ 'has-error': addEditInvestmentForm.first_name.$invalid, 'has-success':!addEditInvestmentForm.first_name.$invalid}">
                    <label for="first_name" class="control-label col-xs-4">First Name</label>
                    <div class="col-xs-8">
                        <ui-select required ng-model="members_first_name.selected" ui-select-required theme="bootstrap" style="width: 300px;" title="Select First Name" name="first_name" id="first_name" required>
                            <ui-select-match placeholder="Select or search First Name...">{{members_first_name.selected.full_name}}</ui-select-match>
                            <ui-select-choices repeat="member_f in members_first_name | filter: $select.search">
                                <span ng-bind-html="member_f.full_name| highlight: $select.search"></span>
                            </ui-select-choices>
                        </ui-select>
                        <div ng-show="addEditInvestmentForm.$submitted || addEditInvestmentForm.first_name.$touched" ng-messages="addEditInvestmentForm.first_name.$error">
                            <div ng-message="required" class="validationErrorMessage">First Name is required</div>
                        </div>
                    </div>
                </div>

                <!-- Second Name -->
                <div class="form-group required" ng-class="{ 'has-error': addEditInvestmentForm.second_name.$invalid, 'has-success':!addEditInvestmentForm.second_name.$invalid}">
                    <label for="second_name" class="control-label col-xs-4">Second Name</label>
                    <div class="col-xs-8">
                        <ui-select required ng-model="members_second_name.selected" ui-select-required theme="bootstrap" style="width: 300px;" title="Select Second Name" name="second_name" id="second_name" required>
                            <ui-select-match placeholder="Select or search Second Name...">{{members_second_name.selected.full_name}}</ui-select-match>
                            <ui-select-choices repeat="member_s in members_second_name | filter: $select.search">
                                <span ng-bind-html="member_s.full_name| highlight: $select.search"></span>
                            </ui-select-choices>
                        </ui-select>
                        <div ng-show="addEditInvestmentForm.$submitted || addEditInvestmentForm.second_name.$touched" ng-messages="addEditInvestmentForm.second_name.$error">
                            <div ng-message="required" class="validationErrorMessage">Second Name is required</div>
                        </div>
                    </div>
                </div>

Вот что происходит:

Выбор первого - второй, и наоборот.

Answer 1

Я сталкивался с этой проблемой несколько раз. Если вы хотите использовать одни и те же данные дважды, используйте:

angular.copy(data)

Если вы присоединяете один и тот же объект данных к области действия каждый раз, когда вы изменяете одну переменную области действия, это повлияет на другую, поскольку они оба связаны с одной и той же переменной.