使用 AngularJS 进行选择的占位符答案

【问题标题】：Placeholder for select with AngularJS使用 AngularJS 进行选择的占位符
【发布时间】：2017-08-03 15:24:44
【问题描述】：

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

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

【问题讨论】：

有趣的是，为什么 ng-repeat 不起作用而 ng-options 起作用。
我不知道您为什么接受与您的要求不符的答案？该答案中没有占位符逻辑，它可能会使其他将此视为“使用 AngularJS 进行选择的占位符”的可能答案的用户感到困惑。
你做了一个很好的案例。改变了。
现在它对所有用户都更有帮助。现在正确的答案是指问题要求。干杯 m8

标签： javascript html css angularjs

【解决方案1】：

我建议使用 ng-options

<select ng-options="d as d.value for d in refData" ng-model="refDataSelected"></select>

你可以在你的控制器上声明

$scope.refDataSelected = refData[0]

使用第一个元素作为默认选项

如果你想创建一个虚拟文本，你可以使用自定义文本向 refData 添加一个新对象，并给它一个像 -1 这样的虚幻 id。但是提交的时候要检查它的id是否为-1。

【讨论】：

我不想将第一个作为默认值。我想要一条消息，说出我想说的任何内容，但它不是一个可供选择的选项。
有趣的是，使用 ng-options 有效，但 ng-repeat 无效。哦，好的，谢谢。

【解决方案2】：

您可以使用嵌入来添加一个被禁用和选中的额外选项。有关该通用解决方案的更多背景信息，请参阅How do I make a placeholder for a 'select' box?。这里也是ngSelect documentation 供参考。

查看

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

【讨论】：

【解决方案3】：

<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"}];

【讨论】：