AngularJS: невозможно прочитать свойство 'option' из неопределенного

Использование 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>

Плункер: http://plnkr.co/edit/N6oO8c6tL1bw9FCYVmYz?p=preview

Любой указатель приветствуется. Моя цель: 1. При нажатии кнопки "Добавить" без выбора опции выдается сообщение "Пожалуйста, выберите опцию"

  1. Значение по умолчанию для обоих опций - "Выбрать..."

Спасибо!

Источник

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

Посмотрите на обновленную скрипку.

Источник
Другие вопросы по тегам