Verwendung von ng-repeat und ng-options zum Erstellen von Dropdowns. Alles ist gut, außer wenn ich auf "Hinzufügen" klicke, ohne eine Option auszuwählen, gibt Konsole mir Fehler "Kann Eigenschaft nicht lesen 'Option' von undefined"AngularJS: Eigenschaft 'Option' von undefiniert nicht gelesen
Ich möchte Standardoption sein 'wählen ...', aber wenn ich $ benutze scope.Girl = 'Select ...', es heißt 'Girl' undefined. Bitte helfen Sie.
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="[email protected]*" 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
Jeder Zeiger geschätzt wird. Mein Ziel: 1. Wenn Schaltfläche „Hinzufügen“ klicken, ohne eine Option auszuführen, Meldung „Bitte wählen Sie eine Option“
-
zeigen
- Beide Option Dropdown-Standardwert sind „Wählen Sie ... "
Vielen Dank!
Bitte geben Sie eine ordnungsgemäße schriftliche Erklärung darüber, was von diesem Code erwartet wird. Siehe [fragen]. Beachten Sie, dass 'style.selectedItem' nicht mit '$ scope.selectedItem' übereinstimmt. – charlietfl