使用空白选定行的ng-model（不使用定义的选定占位符）

Question

这有效：

<select class="secureProfile">
    <option class="placeholder" selected disabled>välj ett alternativ...</option>
    <option value="male">Man</option>
    <option value="female">Kvinna</option>
</select>

这不是：

<select data-ng-model="gender" class="secureProfile">
    <option class="placeholder" selected disabled>välj ett alternativ...</option>
    <option value="male">Man</option>
    <option value="female">Kvinna</option>
</select>

由于某些原因，在应用data-ng-model时，它似乎摆脱了占位符，看起来像这样（图片显示错误）：

控制器：

.controller('secureProfile', ['$document', '$compile', '$scope', '$window', '$location', '$http', '$cookies', 'socket', 'textAngularManager', 'bridge', function ($document, $compile, $scope, $window, $location, $http, $cookies, socket, textAngularManager, bridge) {
    $scope.gender = null;
}])

当我加载页面以进行闪烁时，它会正确显示，但随后决定选择一个空行。有什么想法吗？

Answer 1

您只需要设置值属性

HTML

<select data-ng-model="gender" class="secureProfile">
  <option class="placeholder" value="" selected disabled>välj ett alternativ...</option>
  <option value="male">Man</option>
  <option value="female">Kvinna</option>
</select>

的 DEMO

Answer 2

只要添加data-ng-model，您的select元素就会显示分配给gender的值，这可能是应用程序启动时未定义的。如果要将“väljettalternativ ...”显示为选定选项，则必须在控制器中添加：

$scope.gender = "välj ett alternativ...";