AngularJS如何取消选择ComboBox中的所有内容?

时间:2016-11-14 09:56:48

标签: javascript angularjs select

好的,我有这样的事情:

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

长话短说......它工作得很好,在页面上......它显示了我需要的所有数据......但是第一个空行被选中(蓝色,其他是灰色(禁用)) ......如下例所示:

账户:

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)

现在我需要摆脱第一排......它根本不应该存在...... 什么都不应该被选中......

有什么建议吗?

以下是一些更多数据:

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

学生:

他有Id,姓名和姓氏,还有BankAccount

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

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

1 个答案:

答案 0 :(得分:2)

试试这个: -

&#13;
&#13;
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;
  })
&#13;
<!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>
&#13;
&#13;
&#13;