具有空间选项值的角度选择

Question

我有一个<select> 和一个ng-model，其中一个选项是空格。当初始值为其他时，angular选择正确的选项，但当初始值为空格时，angular添加空选项。

我可以用 html 来重现它：

<select ng-model="a" ng-trim="false">
  <option value=" ">Default</option>
</select>

<select ng-model="b">
  <option value="x">Default</option>
</select>

还有一个控制器：

$scope.a = " ";
$scope.b = "x";

第一个选择将有一个空白选项，第二个将显示“默认”。添加ng-trim 似乎没有帮助，我从数据库中获取值，所以我不能轻易更改它们。

我可以使用 Angular 1.4.8、1.4.9（我正在使用）和 1.5.8 重现该问题，所有这些都来自 https://code.angularjs.org/。

我在这里有一个小提琴：https://jsfiddle.net/d1cj3kzb/4/。

当ng-model 初始化为空格时，如何让<select> 显示正确的选项？

Answer 1

尝试在代码中声明一个具有默认值的变量，在本例中为空格，例如：

$scope.spaceChar = " ";

然后在您的选择中：

<select ng-model="a" ng-trim="false">
    <option value="{{spaceChar}}">Default</option>
</select>

Answer 2

你可以试试这个吗？

将 ng-trim 应用于您的选项：

<div ng-app="app" ng-controller="MyCtrl">
    <select ng-model="a" >
      <option value=" " ng-trim="true">Default</option>
    </select>

    <select ng-model="b">
      <option value="x">Default</option>
    </select>

在绑定之前修剪你的变量。

angular.module("app", [])
  .controller("MyCtrl",
    function ($scope) {
        $scope.a = (" ").trim();
        $scope.b = "x";
    }
);