AngularJS: Eigenschaft 'Option' von undefiniert nicht gelesen

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“

Beide Option Dropdown-Standardwert sind „Wählen Sie ... "

Vielen Dank!

Quelle

2016-06-12 Developer J

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

Folgendes wird den Trick zu Select... nur ein Platzhalter sein.

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

Um eine Nachricht zu warnen anzuzeigen, dass der Benutzer eine Option ausgewählt hat man diese Logik tun könnte:

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

Werfen Sie einen Blick auf die updated fiddle.

Quelle

2016-06-12 02:51:53 adolfosrs

Danke, adolfosrs. Die von Ihnen bereitgestellte Lösung funktioniert gut. Außer der Meldung "Bitte wählen Sie eine Option" wurde angezeigt, wenn beide Dropdown-Menüs deaktiviert sind. Wenn ich nur die Nachricht anzeigen wollte, wenn keines der Dropdown-Menüs ausgewählt ist? Bedeutung Nachricht nicht anzeigen, wenn mindestens eine Option ausgewählt ist. –

Sie sind schnell! Danke Adolfosrs. Ich mag Ihre generische Lösung, weil ich beliebig viele Dropdowns haben könnte. Zum Beispiel könnte ich "Man" - und "Woman" -Stile einfach hinzufügen, indem Sie sie zu $ scope.item hinzufügen. Für "Man" und "Woman" ist der Standardwert jedoch nicht ausgewählt. Sie haben ihre eindeutigen Standardwerte. Wie kann ich mit Ihrer Lösung mehrere Platzhalter mit mehreren Standardwerten hinzufügen? –

AngularJS: Eigenschaft 'Option' von undefiniert nicht gelesen

Antwort

Verwandte Themen