ngOptions n'est pas visible des options dans mon élément select
-
23-12-2019 - |
Question
J'ai ngOptions dans un de mes sélectionner les éléments connectés à un tableau que j'ai fait dans le contrôleur, et il est juste de ne pas montrer toutes les valeurs.Je dois être en train de faire quelque chose de stupide.
Je sais pour sûr que Angulaire est au travail, et le contrôleur doit être de travailler parce que j'utilise une expression liée à une ngModel dans la même div (en utilisant le même contrôleur) et il fonctionne très bien.
C'est l'extrait de mon code html:
<div class="container" ng-app="tagQuestionnaireApp"> <div class="tagger" ng-controller="taggingController"> <form class="form-horizontal" name="tagForm" role="form"> <!-- Categorize Your Tag --> <div class="form-group"> <label class="sub" for="categorize">Categorize</label> <select class="form-control" id="categorize" ng-model="category" ng-options="cat.text in cat of categories"></select> </div> </form> </div> </div>
C'est mon fichier js:
var tagQuestionnaireApp = angular.module('tagQuestionnaireApp', []);
tagQuestionnaireApp.controller('taggingController', ['$scope', function($scope) {
$scope.categories = [
{text:'Humanities', topics:[{name:"Arts and Design",color:"#ff3d00"},
{name:"History",color:"#ffc107"},
{name:"Linguistics",color:"#ffab00"},
{name:"Literature",color:"#ff7043"},
{name:"Philosophy",color:"#dd2c00"},
{name:"Theology",color:"#ff6f00"},
{name:"Other Humanities",color:"#ff5722"}]},
{text:'Social Sciences', topics:[{name:"Anthropology",color:"#"},
{name:"Archaeology",color:"#"},
{name:"Cultural/Ethnic/Area Studies",color:"#"},
{name:"Economics",color:"#"},
{name:"Gender/Sexuality Studies",color:"#"},
{name:"Geography",color:"#"},
{name:"Political Science",color:"#"},
{name:"Psychology",color:"#"},
{name:"Sociology",color:"#"},
{name:"Other Social Sciences",color:"#"}]},
{text:'Natural Sciences', topics:[{name:"Space sciences",color:"#00695c"},
{name:"Earth sciences",color:"#8bc34a"},
{name:"Biology",color:"#64dd17"},
{name:"Chemistry",color:"#00bfa5"},
{name:"Physics",color:"#009688"},
{name:"Material Sciences",color:"#0a7e07"},
{name:"Other Natural Sciences",color:"#259b24"}]},
{text:'Engineering', topics:[{name:"Mechanical",color:"#"},
{name:"Chemical",color:"#"},
{name:"Civil",color:"#"},
{name:"Electrical",color:"#"},
{name:"Other Engineering",color:"#"}]},
{text:'Formal Sciences', topics:[{name:"Applied Math",color:"#738ffe"},
{name:"Computer Science",color:"#7986cb"},
{name:"Logic",color:"#5c6bc0"},
{name:"Pure Math",color:"#4e6cef"},
{name:"Statistics",color:"#3949ab"},
{name:"Systems Science",color:"#283593"},
{name:"Other Formal Sciences",color:"#5677fc"}]},
{text:'Other', topics:[{name:"Other",color:"#"}]}
];}]);
La solution
Modifiez ce qui suit:
<select
class="form-control"
id="categorize"
ng-model="category"
ng-options="cat.text in cat of categories"
></select>
pour:
<select
class="form-control"
id="categorize"
ng-model="category"
ng-options="cat.text for cat in categories"
></select>
et voir si cela ne fonctionne pas pour vous.