多个 ui-select 下拉列表的一个范围对象

Question

我在 angular 上使用 ui-select 几乎没有困难。我想使用相同的用户范围对象为名字、第二个名字和第三个名字填充三个下拉列表。看起来 angular 不喜欢..

这是我的控制器的样子..最初我只分配了 $scope.members 变量并尝试使用相同的对象填充下拉列表但是 select 首先也是 selects 其他.所以我决定将它分配给三个不同的对象，但它仍然做同样的事情..

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>

事情是这样的：

选择第一个select第二个，反之亦然..

Answer 1

我已经运行多次遇到这个问题。如果您想两次使用相同的数据，请使用：

angular.copy(data)

如果您在任何时候更改一个范围变量时将相同的数据对象附加到范围，它将影响另一个范围，因为它们都绑定到同一变量。

多个 ui-select 下拉列表的一个范围对象

One scope object for multiple ui-select dropdown

angularjs

ui-select