AngularJS 如果超過限制，ui-select multiple 應該顯示警報

Question

在 AngularJS ui-select multiple 中，我可以給它添加一個限制，或者創建一個警報。 但我無法做到這兩點。 如果我顯示警報，則不會從 UI 中清除之前選擇的選項。 代碼筆： https://codepen.io/pragatij55/pen/mdpzmqp

我知道我可以使用 limit="2"，但我還想要一個警報。

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

記者：

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;
       
     }
  }
  
});

Answer 1

不確定這是否是您想要的，但您可以在此處使用Array.pop()刪除警報之前的第三項：

$scope.changed = function(val) {
      if(val && val.length > 2) {
       val.pop();

在上下文中：

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;
       
     }
  }
  
});