Developer J Developer J - 5 months ago 52
AngularJS Question

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!

Answer

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 = '';
    angular.forEach(items.styles, function(style) {
      if (style.selectedItem) {
        text += style.style + ': ' + style.selectedItem.option + '. ';
      } else {
        text = "Select an option.";
      }
    });

    $scope.selectedText = text;
  };

Take a look at the updated fiddle.