ngOptions不显示select元素中的任何选项

ngOptions isn't showing any options in my select element

本文关键字：任何 选项 元素 显示 select ngOptions      更新时间：2023-09-26

我的一个select元素中有ngOptions连接到我在控制器中创建的数组，但它没有显示任何值。我一定是做了什么蠢事。

我确信Angular在工作，控制器也一定在工作，因为我在同一个div(使用相同的控制器)中使用了一个与ngModel相关的表达式，它工作得很好。

这是我的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>

这是我的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:"#"}]}
    ];}]);

修改如下:

<select 
  class="form-control" 
  id="categorize" 
  ng-model="category" 
  ng-options="cat.text in cat of categories"
></select>

: 

<select 
  class="form-control" 
  id="categorize" 
  ng-model="category" 
  ng-options="cat.text for cat in categories"
></select>

，看看是否适合你。

相关文章：