Question

我在角度上使用ui-select时遇到了一些困难。我想使用相同的用户范围对象为名字，第二名和第三名填充三个下拉列表。看起来像角度不喜欢它..

这是我的控制器看起来像..最初我只分配$ 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)

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

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

1 个答案: