使用 AngularJS 选择的占位符

Question

我无法通过选择获得占位符的想法。在下面，第一个条目仍然是空白的。

 <select class="form-control" ng-model="refData" required>
     <option ng-repeat="d in refData">
          {{d.value}}
     </option>
     <option value="" disabled hidden selected>View current values</option>
</select>

原文由 user441521 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用嵌入来添加禁用和选中的额外选项。请参阅 如何为“选择”框制作占位符？ 有关该通用解决方案的更多背景信息。这里也有 ngSelect 文档 供参考。

看法

<div ng-controller="MyCtrl">
    <select name="mySelect"
            id="mySelect"
            ng-options="option.name for option in refData track by option.id"
            ng-model="selectedOption">
         <option value="" disabled selected>View current values</option>
     </select>
</div>

AngularJS 应用程序

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope) {
    $scope.refData = [
      {id: '1', name: 'Option A'},
      {id: '2', name: 'Option B'},
      {id: '3', name: 'Option C'}
    ];

    $scope.selectedOption =  "";
});

JsFiddle 演示

原文由 lin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

<select ng-model="testData" ng-options="test.name for test in testData">
        <option value="" selected>View current values</option>
</select>

给定的测试数据是：

 $scope.testData = [{"name" : "John"}, {"name" : "Micheal"}, {"name" : "Sarah"}];

原文由 Nehal Soni 发布，翻译遵循 CC BY-SA 3.0 许可协议