0

我想使用引导多选下拉菜单为参数选择多个值。我使用它就像 -

<div ng-repeat="param in parameters">
  <div>{{param.name }} :</div>
  <div ng-show = "param.multipleValues">
    <select ng-model="param.value" id="testMultiSelect" multiple="multiple">
        <option ng-repeat="v in values" value="{{v}}" >{{v}}</option>
    </select>
  </div>
  <div ng-show = "!param.multipleValues">
    <input type="text" ng-model="param.value">
  </div>
</div>

但是，不知何故，多选在 ng-repeat 中不起作用。如果我把它放在这个具有 ng-repeat 的 div 之外，它就可以工作。它就像在图像中一样 - 在此处输入图像描述

4

1 回答 1

1

这可能会帮助你

 
 var app = angular.module('testApp', [ ]);
 
 
 app.directive('telDropdownmutiple', ['$http', function ($http) {
	    return {
	        restrict: 'E',
	        scope: {
	            array: '=',
	            validate: '@',
	            ngModel: '=',
	            title: '@',
	            checkId: '@',
	            ngmaxLength: '@',
	            ngminLength: '@',
	            lblvalue: '@',
	            textboxSize: '@',
	            lblSize: '@',
	            ngShow: '@',
	            textboxtype: '@',
	            getString: '@',
	            multiple: '@',
	        }, 

	        template:'<div   id="{{ checkId }}"  > <span>{{ title }}</span>:<select  {{ multiple }}  class="{{className}}"  ng-model="ngModel" ng-options="a[optValue] as a[optDescription] for a in array"   requireiftrue="{{ validate }}"></div>'+
						'<option style="display: none" value="">{{title}}</option>' +
					'</select> </div>',
	        link: function (scope, element, attrs) {

	            scope.lblvalue = attrs.lblvalue;
	            scope.title = attrs.title;
	            scope.optValue = attrs.optValue;
	            scope.optDescription = attrs.optDescription;
	         
	        }
	    };
	}]);
	
	  app.controller('testController', ['$scope', '$location', function ($scope, $location) {
        
         $scope.SelectMultiple = [
			{Id: 1, Description: "option1"}, 
			{Id: 2, Description: "option2"}, 
			{Id: 3, Description: "option3"}, 
			{Id: 4, Description: "option4"},
			{Id: 5, Description: "option5"},
			{Id: 6, Description: "option6"}, 
			{Id: 7, Description: "option7"}, 
			{Id: 8, Description: "option8"}, 
			{Id: 9, Description: "option9"},
			{Id: 10, Description: "option10"}
		 ];
 
	  
      
  }]);
<script data-require="angular.js@~1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<body class="hold-transition skin-blue sidebar-mini" data-ng-app="testApp">
  
            <!-- Logo -->
    
        <!-- Left side column. contains the logo and sidebar -->
   

        <div class="content-wrapper" style=" margin-top: 50px; margin-bottom: 10px; height: 350px;   overflow-y: auto; " ng-controller="testController">
       <tel-Dropdownmutiple multiple ng-model="registration.multipledropGender"   lblvalue="Gender" array="SelectMultiple" opt-value="Id" opt-description="Description" validate='true' class-Name="form-controlselect select2" ></tel-Dropdownmutiple>
    </div>
 
 
 


</body>

于 2015-12-18T06:45:41.350 回答