基于下拉选择的默认选择值

Question

中心名称下拉代码：

<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6">
					<label>Centre Name<span class="required">*</span></label>
					<div class="form-group">
						<select data-selectpicker class="selectpicker" name="location"
							data-ng-model="user.location_id" required>
							<option value="">Select</option>
							<option data-ng-repeat="location in locationValues"
								value="{{location.location_id}}">{{location.name}}</option>
						</select> 
						<span class="input-error-span" data-ng-show="editUser.$submitted || editUser.location.$touched || editUser.location.$dirty">
							<span data-ng-show="editUser.location.$error.required">{{'REQUIRED_CENTRE' | translate}}</span>
						</span>
					</div>
				</div>

我的应用程序有一个下拉菜单和一个多选框。两者的值都取自同一个数据库。

现在的问题是用户需要先从下拉列表中选择选项。此选择应反映在同一页面上的多选上。表示从下拉框中选择的任何选项都必须是用户无法更改的多选中的默认选择。

请帮我找出解决办法。

可用中心多选框代码：

<div class="col-lg-12 col-md-12 col-sm-4 col-xs-4"  data-ng-if="user.role_id == '2'">
					<label>Available In Centre<span class="required">*</span></label>
					<div class="form-group">
						<select name="location" class="form-control" multiple data-ng-multiple="true" data-ng-model="viewlocation" data-ng-options="obj.name for obj in locationValues" data-ng-init="obj.location_id = user.location_id" required>
						</select>						
						<span class="input-error-span" data-ng-show="editUser.$submitted || editUser.location.$touched">
							<span data-ng-show="editUser.location.$error.required">{{'REQUIRED_VIEWABLE_LOCATION' | translate}}</span>
						</span>
					</div>
				</div>

现在，如果用户从下拉列表中选择选项，则应在多选框中选择该选项。并且用户无法更改它，直到他/她更改下拉菜单中的选项。

Answer 1

这只是使用 ng-disabled 完成的，检查下面的小提琴

<div ng-app="exampleApp" ng-controller="appController">


     <select class="form-control" ng-model="disabledOptions">
        <option
            ng-repeat="fruit in example13data"
            ng-value="fruit.label"
        >{{fruit.label}}</option>
    </select>
    <br><br>

      <select class="form-control" multiple ng-model="disabledOptions1">
        <option
            ng-repeat="fruit in example13data"
            ng-disabled="disabledOptions.indexOf(fruit.label) !== -1"
            ng-value="fruit.label"
        >{{fruit.label}}</option>
    </select>

</div>

var myApp = angular.module('exampleApp',['angularjs-dropdown-multiselect']);

myApp.controller('appController', ['$scope', function($scope) {

        $scope.example13model = [];
        $scope.example13data = [
            {id: 1, label: "David"},
            {id: 2, label: "Jhon"},
            {id: 3, label: "Lisa"},
            {id: 4, label: "Nicole"},
            {id: 5, label: "Danny"}];

        $scope.disabledOptions = ['David'];
        $scope.disabledOptions1 = $scope.example13data[0];

}]);

https://jsfiddle.net/bmvtmzmm/140/

Answer 2

通过使用 ng-change 在多选下拉列表中推送一个值

 <ui-select ng-model="singleitem" ng-change="pushValue($select.selected)" theme="bootstrap" ng-disabled="ctrl.disabled" sortable="true" close-on-select="true" style="width: 500px;">
<ui-select-match placeholder="Select person...">{{$select.selected.name}} &lt;{{$select.selected.email}}&gt;</ui-select-match>
<ui-select-choices repeat="person in people">
  <div ng-bind-html="person.name | highlight: $select.search"></div>
  <small>
    email: {{person.email}}
    age: <span ng-bind-html="''+person.age | highlight: $select.search"></span>
  </small>
</ui-select-choices>

查看这个 plunker 示例。 http://plnkr.co/edit/jLoya9OOekRddZWtmCTC?p=preview