En AngularJS ui-select multiple, puedo agregarle un límite o crear una alerta. Pero no soy capaz de hacer ambas cosas. Si muestro la alerta, las opciones seleccionadas anteriormente no se borran de la interfaz de usuario. Codepen: https://codepen.io/pragatij55/pen/mdpzmqp
Sé que puedo usar limit="2", pero también quiero una alerta.
<div ng-app="demo" class="ng-cloak" ng-controller="DemoCtrl"> <ui-select multiple ng-model="myModel" theme="bootstrap" ng-disabled="disabled" close-on-select="false" style="width: 800px;" on-select="changed(myModel)" title="Choose a person"> <ui-select-match placeholder="Select person...">{{$item.name}}</ui-select-match> <ui-select-choices repeat="person.name as person in people | propsFilter: {name: $select.search, type: $select.search}"> <div ng-bind-html="person.name | highlight: $select.search"></div> <small> type: <span ng-bind-html="''+person.type | highlight: $select.search"></span> </small> </ui-select-choices> </ui-select> </div>JS:
app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) { $scope.people = [ { name: 'var1', type: 'header' }, { name: 'var2', type: 'site' }, { name: 'var3', type:'header' }, { name: 'var4', type:'header' } ]; $scope.changed = function(val) { if(val && val.length > 2) { $scope.myModel = $scope.prevModel; alert("Upto 2 variables can be selected") } else { $scope.prevModel = val; } } });No estoy seguro de si esto es lo que desea, pero puede eliminar ese tercer elemento justo antes de la alerta con Array.pop() aquí:
$scope.changed = function(val) { if(val && val.length > 2) { val.pop();En contexto:
app.controller('DemoCtrl', function ($scope, $http, $timeout, $interval) { $scope.people = [ { name: 'var1', type: 'header' }, { name: 'var2', type: 'site' }, { name: 'var3', type:'header' }, { name: 'var4', type:'header' } ]; $scope.changed = function(val) { if(val && val.length > 2) { val.pop(); // <- add this line $scope.myModel = $scope.prevModel; alert("Upto 2 variables can be selected") } else { $scope.prevModel = val; } } });