如何在AngularJS中获取<select>列表以仅在未选择任何值时显示消息?</select>

时间:2014-06-04 13:44:04

标签: javascript angularjs

我正在查看页面:https://docs.angularjs.org/api/ng/directive/select

这里他们展示了一个选择示例,但是当我在谷歌浏览器中打开页面时,我注意到我从不在浏览器窗口中看到选项 - 选择颜色。

有人可以解释这是否与浏览器有关。它不应该出现在页面中编码。

  <span  class="nullable">
    <select ng-model="myColor" ng-options="color.name for color in colors">
      <option value="">-- choose color --</option>
    </select>
  </span><br/>

我有自己的应用程序(AngularJS v1.3.0-beta.8),我编码:

  <select ng-model="app.config.admin.examTypeId"
          ng-change="home.configChanged()"
          ng-options="item.id as item.name for item in type.dataPlus">
          <option value="">Choose Type</option>
  </select>

在我的应用程序中,始终请参阅“选择类型”选项。

我很困惑,因为它似乎都不像我想要的那样工作。我想要的是,如果没有选择任何值,则仅在第一次看到该选项。

1 个答案:

答案 0 :(得分:0)

对我来说它的工作正常,也与浏览器无关,因为该选项值只是一个静态值......甚至不是动态的

<强> Working Demo

<强> HTML

Color (null allowed):
<span  class="nullable">
  <select ng-model="myColor" ng-options="color.name for color in colors">
    <option value="">-- choose color --</option>
  </select>
</span>

<强>脚本

var app = angular.module('myApp', []);
app.controller('ArrayController', function ($scope) {
    $scope.colors = [{
        name: 'black',
        shade: 'dark'
    }, {
        name: 'white',
        shade: 'light'
    }, {
        name: 'red',
        shade: 'dark'
    }, {
        name: 'blue',
        shade: 'dark'
    }, {
        name: 'yellow',
        shade: 'light'
    }];
});