javascript - 在 Angular 中设置默认选择文本

标签 javascript html angularjs

我对 Angular 还很陌生,并且已经遇到了我的第一个问题。我在 stackoverflow 上寻找解决方案,但没有人遇到与我相同的情况。我想在我的“选择框”中设置默认文本。就像“选择你的车”之类的东西。但我不知道如何插入这个默认文本。我尝试用我在 HTML 中学到的方式来解决它。但它不起作用,因为我没有任何标签。

附:我还尝试了一点 MVC。我认为它根本不正确,但在这篇文章中忽略它。

这就是我的代码:

查看 -> index.html

<!DOCTYPE html>
<html lang="en-US">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectedCar" ng-options="x.marke for x in cars">
    </select>

  <h1>You selected: {{selectedCar.marke}}</h1>
  <h1>The color is: {{selectedCar.farbe}}</h1>
  </div>


<script src="./JS/myApp.js"></script>
<script src="./JS/myCtrl.js"></script>

</body>
</html>

模型 -> myApp.js

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

控制 -> myCtrl.js

  app.controller("myCtrl", function($scope){
  $scope.cars = [
  {marke: "Lamborghini", farbe: "Gelb"},
  {marke: "Bugatti", farbe: "Schwarz"},
  {marke: "BMW", farbe: "Blau"},
  {marke: "VW", farbe: "Grau"}
  ];
  })

感谢您的帮助

最佳答案

只需添加另一个选项,如下所示,

 <select ng-model="selectedCar" ng-options="x.marke for x in cars">
     <option value="">-- Choose your car --</option>
 </select>

演示

var app = angular.module("myApp", []);
 app.controller("myCtrl", function($scope){
  $scope.cars = [
  {marke: "Lamborghini", farbe: "Gelb"},
  {marke: "Bugatti", farbe: "Schwarz"},
  {marke: "BMW", farbe: "Blau"},
  {marke: "VW", farbe: "Grau"}
  ];
  })
<html lang="en-US">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div ng-app="myApp" ng-controller="myCtrl">
    <select ng-model="selectedCar" ng-options="x.marke for x in cars">
     <option value="">-- Choose your car --</option>
    </select>

  <h1>You selected: {{selectedCar.marke}}</h1>
  <h1>The color is: {{selectedCar.farbe}}</h1>
  </div>
</body>
</html>

关于javascript - 在 Angular 中设置默认选择文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46828575/

相关文章:

javascript - 如何使用正则表达式在 javascript 中的另一个单词之后提取单词?

javascript - 使用 JavaScript 使用 MoSync Native UI 捕获用户输入

javascript - 事件绑定(bind)是什么意思?

php - 使用推文按钮 - 链接根本不会出现在推文文本中

javascript - 删除项目时 Angular 范围不会更新

angularjs - 发布http ://localhost:8082/public/fileUpload 404 (Not Found) when file upload button is clicked

javascript - AngularJS 路由和模型——我在正确的轨道上吗?

javascript - 使用window.onbeforeunload暂停YouTube视频,使其不会与音频重叠

javascript - 切换类时如何使div缓慢移动?

jquery - 最后一个 HTML 列表项的圆底 Angular ?