AngularJS: Impossible de lire la propriété 'option' de undefined

Utilisation de ng-repeat et de ng-options pour créer des listes déroulantes. Tout va bien, sauf quand je clique sur "Ajouter" sans sélectionner une option, la console me donne l'erreur "Impossible de lire la propriété 'option de undefined"AngularJS: Impossible de lire la propriété 'option' de undefined

Je veux que l'option par défaut soit' select ... 'mais quand j'utilise $ scope.Girl = 'Sélectionnez ...', il est dit 'Fille' indéfini. S'il vous plaît aider.

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

Tout pointeur est apprécié. Mon objectif: 1. Lorsque vous cliquez sur « Ajouter » sans sélectionner une option, message à afficher « S'il vous plaît sélectionner une option »

deux Option Valeur par défaut déroulante sont « Sélectionner ... "

Merci!

Source

2016-06-12 Developer J

Veuillez fournir une explication écrite appropriée de ce que ce code est censé faire. Voir [demander]. Notez que 'style.selectedItem' n'est pas la même chose que' $ scope.selectedItem' – charlietfl

Ce qui suit fera l'affaire à Select... être juste un espace réservé.

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

Pour afficher un message pour avertir que l'utilisateur n'a pas choisi une option que vous pouvez faire cette logique:

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

Jetez un oeil à la updated fiddle.

Source

2016-06-12 02:51:53 adolfosrs

Merci, adolfosrs. La solution que vous avez fournie fonctionne bien. Sauf le message "veuillez sélectionner une option" affiché lorsque les deux listes déroulantes ne sont pas sélectionnées. Si je voulais seulement montrer le message quand aucune liste déroulante n'est sélectionnée? Ce qui signifie ne pas afficher le message si au moins une option est sélectionnée. –

Vous êtes rapide! Merci adolfosrs. J'aime votre solution générique parce que je pourrais avoir n'importe quel nombre de listes déroulantes. Par exemple, je pourrais ajouter des styles "Man" et "Woman" simplement en les ajoutant à $ scope.item. Cependant, pour "Man" et "Woman", la valeur par défaut n'est pas select ... ils ont leurs valeurs par défaut uniques. Avec votre solution, comment ajouter plusieurs espaces avec plusieurs valeurs par défaut? –

AngularJS: Impossible de lire la propriété 'option' de undefined

Répondre

Questions connexes