newbie newbie - 23 days ago 4
AngularJS Question

AngularJS How to deselect all in ComboBox?

Ok guys, I got something like this:

<select style="width: 100px;"
ng-disabled="true"
ng-model="selectedStudent.accounts"
size="5"
ng-options="accounts.name for acount in selectedStudent.accounts track by account.id"
>
</select>


Long story short...it works just fine, on the page...it shows all the data i need...but the first empty row is selected (its blue, while the others are gray(disabled))...like in the example below:

Accounts:

row0 (selected and empty)

row1 (real data in it, and disabled)

row2 (real data in it, and disabled)

row3 (real data in it, and disabled)


Now I need to get rid of the first row...it should not be there at all...
and nothing should be selected...

Any suggestions?

Here is some more data:

$scope.selectedStudent = {};
$scope.selectedStudent = student;


And the Student:

He has Id, Name and Last Name, also BankAccount

@OneToMany(cascade = { CascadeType.ALL})
private Set<BankAccount> accounts;

public Student() {
accounts= new HashSet<BankAccount>();
}

Answer

Try this:-

angular.module('app', [])
  .controller('Controller', function($scope) {

    $scope.selectedStudent = {};
    $scope.selectedStudent.accounts = {};
    $scope.selectedStudent.accounts[0] = {};
    $scope.selectedStudent.accounts[0].name = "first";
    $scope.selectedStudent.accounts[0].id = 1;
    $scope.selectedStudent.accounts[1] = {};
    $scope.selectedStudent.accounts[1].name = "second";
    $scope.selectedStudent.accounts[1].id = 2;
    $scope.selected_account = $scope.selectedStudent.accounts[0].id;
  })
<!DOCTYPE html>

<head>
  <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="app">
  <div ng-controller="Controller">
    <select style="width: 100px;" ng-disabled="true" ng-model="selectedStudent.accounts" size="5" ng-options="acount.name for acount in selectedStudent.accounts track by acount.id">
      <option value="" selected hidden />
    </select>

  </div>
</body>

</html>