Search code examples
angularjsangularjs-ng-repeatangularjs-ng-options

AngularJS: Cannot read property 'option' of undefined

Using ng-repeat and ng-options to create dropdowns. All is well except when I click "Add" without selecting any option, console gives me error "Cannot read property 'option' of undefined"

I want default option to be 'select...' but when I use $scope.Girl = 'Select...', it says 'Girl' undefined. Please help.

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

Any pointer is appreciated. My goal: 1. When clicking "Add" button without selecting an option, message to show "please select an option"

  1. Both option dropdown default value are "Select..."

Thank you!

Solution

  • The following will do the trick to Select... be just a placeholder.

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

    To display a message to warn that the user has not selected an option you could do this logic:

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

    Take a look at the updated fiddle.