AngularJS：无法读取未定义的属性“选项”答案

【问题标题】：AngularJS: Cannot read property 'option' of undefinedAngularJS：无法读取未定义的属性“选项”
【发布时间】：2016-06-12 19:43:47
【问题描述】：

使用 ng-repeat 和 ng-options 创建下拉菜单。一切都很好，除非我单击“添加”而不选择任何选项，控制台给我错误“无法读取未定义的属性'选项'”

我希望默认选项为“选择...”，但是当我使用 $scope.Girl = '选择...' 时，它显示“女孩”未定义。请帮忙。

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

app.controller('MainCtrl', function($scope) {
  $scope.item = {
   
   "styles": [{
     "style": "Girl",
     "options": [{
       "option": "Select..."
     }, {
       "option": "Anna"
     }, {
       "option": "Betty"
     }, {
       "option": "Clara"
     }]
   }, {
     "style": "Boy",
     "options": [{
       "option": "Select..."
     }, {
       "option": "Anthony"
     }, {
       "option": "Billy"
     }, {
       "option": "Charles"
     }]
   }]
 }; 
 
 $scope.addItems = function(items) {
   var text = '';
   angular.forEach(items.styles, function (style) {
     text += style.style + ': ' + style.selectedItem.option + '. ';
   });
   
   $scope.selectedText = text;
 };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@*" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
   <div>
 
  <div ng-repeat="style in item.styles">
    <label class="input-label">{{style.style}}</label>
    <select ng-model="style.selectedItem" ng-options="option.option for option in style.options">
    </select>
  </div>
  <button class="button button-icon ion-plus" ng-click="addItems(item)">
    add
  </button>
  
  <div>
    
  </div>
  {{selectedText}}
  </div>
  </body>

</html>

Plunker：http://plnkr.co/edit/N6oO8c6tL1bw9FCYVmYz?p=preview

任何指针表示赞赏。我的目标： 1.点击“添加”按钮未选择选项时，提示“请选择一个选项”

两个选项下拉菜单的默认值都是“选择...”

谢谢！

【问题讨论】：

请提供正确的书面解释，说明此代码的预期用途。见How to Ask。注意style.selectedItem与$scope.selectedItem不同

标签： angularjs angularjs-ng-repeat angularjs-ng-options

【解决方案1】：

以下内容可以让Select... 成为一个占位符。

<select ng-model="style.selectedItem" ng-options="option.option for option in style.options">
   <option value="" disabled selected hidden>Select...</option>
</select>

要显示一条消息以警告用户尚未选择选项，您可以执行以下逻辑：

$scope.addItems = function(items) {
    var text = '';
    var hasSelected = false;
    angular.forEach(items.styles, function(style) {
      if (style.selectedItem) {
        hasSelected = true;
        text += style.style + ': ' + style.selectedItem.option + '. ';
      } 
    });

    if (!hasSelected){
      text = "Select an option.";
    }

    $scope.selectedText = text;
};

看看updated fiddle。

【讨论】：

谢谢你，阿道夫。您提供的解决方案效果很好。除了未选择两个下拉菜单时显示的“请选择一个选项”消息。如果我只想在未选择任何下拉列表时显示消息？意思是如果至少选择了一个选项，则不显示消息。
你很快！谢谢阿道夫。我喜欢你的通用解决方案，因为我可以有任意数量的下拉菜单。例如，我可以通过将“Man”和“Woman”样式添加到 $scope.item 来添加它们。但是，对于“Man”和“Woman”，默认值不是 select... 它们有其唯一的默认值。使用您的解决方案，如何添加具有多个默认值的多个占位符？