CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveui-select
user944513
user944513

Reputation: 12729

how to disable select view in angular?

I want to disable the ui multiple select view whenever I select particaular value in my example "Nicole" .If I select "Nicole" it disable the ui select then user not able to select other option.

can we remove previous selected option when user select "Nicole" .? I want only if user select "Nicole" it disable the select view and remove other selected option .

plunker http://plnkr.co/edit/eVXVzlRXJ4KUZaNjID6P?p=preview

$scope.OnClickSelect = function(item) {
    $scope.multipleDemo.push(item.age)
}

$scope.OnRemoveSelect = function(item) {
    var index = $scope.multipleDemo.indexOf(item.age);
    $scope.multipleDemo.splice(index, 1);
}

Upvotes: 0

Views: 412

Answers (2)

Jobin S Kumar
Jobin S Kumar

Reputation: 139

Modified OnClickSelect function call to OnClickSelect($item, $select) and added disabled in scope. $select variable will hepl us to manipulate the selected data.

use on-select="OnClickSelect($item, $select)" and ng-disabled="disabled" in ui-select tag.

$scope.disabled = false;
$scope.restrictNames = ["Nicole", "Michael"];

$scope.OnClickSelect=function(item, $select)
{
  if($scope.restrictNames.indexOf(item.name) != -1){
    $select.selected = [];
    $scope.multipleDemo = [];
    $scope.disabled = true;
  }
  $scope.multipleDemo.push(item.age);
}

Upvotes: 0

Caleb
Caleb

Reputation: 2298

I forked your plunker here.

index.html

I changed

ng-disabled="disable"

to

ng-disabled="isDisabled()"

demo.js

$scope.disabled = false;

$scope.OnClickSelect = function(item) {
  if (item.name === 'Nicole') {
    // Check to make sure there is a previous user to remove
    if ($scope.multipleDemo.length > 0) {
      $scope.multipleDemo.pop();
    }
    // Disable user picker
    $scope.disabled = true;
  }
  $scope.multipleDemo.push(item.age);
}

$scope.isDisabled = function() {
  return $scope.disabled;
}

Currently, when you select "Nicole" it disables the ui select picker and it removes the previously added user from the list multipleDemo. For some reason, it's removing the previously added user from multipleDemo list but it's not removing it from the UI. The digest cycle is not updating properly. Might it worth it to try it in your project to see if it gets updated properly there.

Hope this helps!

Upvotes: 1

Related Questions