Question

中心名称下拉代码：

＆＃13;

<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>

＆＃13;

我的应用程序有一个下拉菜单和一个多选框。从同一数据库中获取的值。

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

请帮我找出解决方案。

可用中心多选框的代码：

＆＃13;

<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>

＆＃13;

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

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

默认选择值基于下拉选择

2 个答案: