使用 ng-model 删除选择中的空选项答案

【问题标题】：Remove empty option in the select using ng-model使用 ng-model 删除选择中的空选项
【发布时间】：2017-12-05 12:43:00
【问题描述】：

我是 Angular js 的新手。在我的代码中，用户更改了单选按钮的值。并且根据所选单选按钮的值，从 ng-switch
加载一段代码 HTML：

<body ng-app="">
  <div ng-repeat="button in modes">
    <label>
      <input type="radio" ng-model="data.mode" value="{{button.value}}" ng-click="clearObjectIdModal()" name="e_modes">
        {button.label}}
    </label>
  </div>

  <div ng-switch on="data.mode">

    <div ng-switch-when="client">
      <label for="e_selected_object_item_id">Select Client name: </label>
      <select id="e_selected_object_item_id" name="e_selected_object_item_id" ng-model="currentDataItem.object_id" required>
        <option ng-repeat="item in customersListArr" value="{{ item.id }}">{{ item.Name }}</option>
      </select>
    </div>

   <div ng-switch-when="agent">
     // This part is similar to the previous one
   </div>

  </div>
</body>

控制器部分：

$scope.data = {};
$scope.setFile = function () {
  if ($scope.data.mode == 'client')
    return 'client';
  else if ($scope.data.mode == 'agent')
    return 'agent';

$scope.modes = [{
  value: 'client',
  label: 'Client'
},{
  value: 'agent',
  label: 'Agent'
}];

$scope.currentDataItem = data;  // data is preloaded from inputs in form

还有一个 ng-click="clearObjectIdModal()" 可以在切换单选按钮时清除模型：

$scope.clearObjectIdModal = function() {
  $scope.currentDataItem = "";
}

问题是每次单选按钮切换到动态变化的选择值时，其中第一个选项的值就等于未定义。因为在构建这些选项的数组中没有这样的 object_id（这是不存在的 id，因此绘制了一个空字段）。
也就是说，有所有的作品。但是选择中的第一个选项（切换到另一个单选按钮后）呈现为空字符串。
有想法，怎么解决？

【问题讨论】：

标签： angularjs select angular-ngmodel ng-switch

【解决方案1】：

所以我在函数 clearObjectIdModal() 中写道：

$scope.clearObjectIdModal = function() {
  if ($scope.e_data["mode"] == 'client') {
    if ($scope.customersListArr.length > 0) {
      $scope.currentDataItem.object_id = $scope.customersListArr[0]['id'];
    }
  }
  else if ($scope.e_data["mode"] == 'agent') {
    if ($scope.agentsListArr.length > 0) {
      $scope.currentDataItem.object_id = $scope.agentsListArr[0]['id'];
    }
  }

}

之后，当我更改单选按钮时，当前选择中的第一个选项（每次都更改）将不为空。

当您将标题添加为列表中的第一项时，可以解决附加空选项的问题：

<option value="" disabled>Select</option>

【讨论】：

【解决方案2】：

我不确定我是否正确理解了您的问题，但我会提出一些改进建议。

将您的 setFile 函数更改为如下

$scope.setFile = function (){return $scope.data.mode;}

我也没有在您的代码中看到您的函数的右括号。此外，如果你的函数只会返回 data.mode 那么为什么需要这个函数呢？

我建议像这样正确初始化您的 data 对象：

$scope.data = {mode:'client'};
将您的 clearObjectIdModal 函数更改为：

$scope.clearObjectIdModal = 函数（模式） { $scope.currentDataItem = ""; $scope.data.mode=模式； }

并在您的 HTML 中将其用作 ng-click="clearObjectIdModal(button.mode)"

【讨论】：

Tsungur，谢谢你的回答和时间。但是我昨天自己解决了这个问题！）