AngularJS: 无法读取未定义的属性 'option'

Question

使用 ng-repeat 和 ng-options 创建下拉菜单。一切都很好，除了当我单击 "Add" 而不选择任何选项时，控制台给我错误 "Cannot read property 'option' of undefined"

我希望默认选项为 'select...'，但是当我使用 $scope.Girl = 'Select...' 时，它显示 '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>

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

感谢任何指点。我的目标： 1. 在没有选择选项的情况下点击"Add"按钮时，消息显示"please select an option"

两个选项下拉默认值都是"Select..."

谢谢！

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

AngularJS: 无法读取未定义的属性 'option'

AngularJS: Cannot read property 'option' of undefined

angularjs

angularjs-ng-repeat

angularjs-ng-options

AngularJS: 无法读取未定义的 属性 'option'

AngularJS: Cannot read property 'option' of undefined

angularjs

angularjs-ng-repeat

angularjs-ng-options

AngularJS: 无法读取未定义的属性 'option'