Question

我目前正在学习angularJS，到目前为止一直很好，但我遇到了一个我似乎无法解决的问题。

我有两个选择框，一个包含顶级类别，另一个用于子类别，当第一个选择更改时，它应该动态更新。

第一个选择框正在填充，但是尽管我开发的事件函数为第二个绑定数组设置了值，但视图永远不会使用新值更新第二个选择框。我不确定我做错了什么，并尝试过很多东西，但没有运气。

这就是我所拥有的：

var themebucketApp = angular.module('themebucketApp',[]);

//category list controller
themebucketApp.controller('CategoriesOptions',function($scope) {

    $scope.thememap = {"wordpress":[{"category":"Activism"},{"category":"Art"},{"category":"Blog \/ Magazine"},{"category":"BuddyPress"},{"category":"Business"},{"category":"Cart66"},{"category":"Charity"},{"category":"Children"},{"category":"Churches"},{"category":"Computer"},{"category":"Corporate"},{"category":"Creative"},{"category":"eCommerce"},{"category":"Entertainment"},{"category":"Environmental"},{"category":"Events"},{"category":"Experimental"},{"category":"Fashion"},{"category":"Film & TV"},{"category":"Food"},{"category":"Government"},{"category":"Health & Beauty"},{"category":"Hosting"},{"category":"Jigoshop"},{"category":"Marketing"},{"category":"Miscellaneous"},{"category":"Mobile"},{"category":"Music and Bands"},{"category":"News \/ Editorial"},{"category":"Nightlife"},{"category":"Nonprofit"},{"category":"Personal"},{"category":"Photography"},{"category":"Political"},{"category":"Portfolio"},{"category":"Restaurants & Cafes"},{"category":"Retail"},{"category":"Shopping"},{"category":"Software"},{"category":"Technology"},{"category":"Travel"},{"category":"Wedding"},{"category":"WooCommerce"},{"category":"WordPress"},{"category":"WP e-Commerce"}],"magento":[{"category":"Entertainment"},{"category":"Fashion"},{"category":"Health & Beauty"},{"category":"Magento"},{"category":"Miscellaneous"},{"category":"Shopping"},{"category":"Technology"}],"designs":[{"category":"404 Pages"},{"category":"Activism"},{"category":"Admin Templates"},{"category":"Art"},{"category":"Business"},{"category":"Charity"},{"category":"Children"},{"category":"Churches"},{"category":"Computer"},{"category":"Corporate"},{"category":"Creative"},{"category":"Electronics"},{"category":"Entertainment"},{"category":"Environmental"},{"category":"Events"},{"category":"Experimental"},{"category":"Fashion"},{"category":"Film & TV"},{"category":"Food"},{"category":"Government"},{"category":"Health & Beauty"},{"category":"Hosting"},{"category":"Marketing"},{"category":"Miscellaneous"},{"category":"Mobile"},{"category":"Music and Bands"},{"category":"Nightlife"},{"category":"Nonprofit"},{"category":"Personal"},{"category":"Photo Gallery"},{"category":"Photography"},{"category":"Political"},{"category":"Portfolio"},{"category":"Restaurants & Cafes"},{"category":"Resume \/ CV"},{"category":"Retail"},{"category":"Shopping"},{"category":"Site Templates"},{"category":"Social Media Home"},{"category":"Software"},{"category":"Specialty Pages"},{"category":"Technology"},{"category":"Travel"},{"category":"Under Construction"},{"category":"Virtual Business Card"},{"category":"Wedding"}],"opencart":[{"category":"Entertainment"},{"category":"Fashion"},{"category":"Miscellaneous"},{"category":"OpenCart"},{"category":"Shopping"},{"category":"Technology"}]};

    $scope.categories  = [{'name' : 'WordPress', 'value' : 'wordpress'},{'name' : 'Magento', 'value' : 'magento'},{'name' : 'OpenCart', 'value' : 'opencart'},{'name' : 'Designs', 'value' : 'designs'}];

    $scope.subcategories = [];

    $scope.loadSubcategories = function(){
        $scope.subcategories = $scope.thememap[$('#theme-type').val()];
    };

});

...

<div class="navbar-text pull-right" style="margin-top:10px;">
    <select id="theme-type" name="themetype" ng-controller="CategoriesOptions" ng-click="loadSubcategories();">
        <option value="">Theme Type</option>
        <option ng-repeat='category in categories' value="{{category.value}}">{{category.name}}</option>
    </select>
    <select id="theme-cat" name="themecat" ng-controller='CategoriesOptions'>
        <option value="All">All</option>
        <option ng-repeat='subcategory in subcategories' value='{{subcategory.category}}'>{{subcategory.category}}</option>
    </select>
</div>

有谁能告诉我我做错了什么或我错过了什么？

Answer 1

有几个问题：

一个：ng-controller="CategoriesOptions"应该只声明一次而不是每个控件一个像这样：

<div class="navbar-text pull-right" style="margin-top:10px;" ng-controller="CategoriesOptions">
<select id="theme-type" name="themetype" ng-click="loadSubcategories();">
    <option value="">Theme Type</option>
    <option ng-repeat='category in categories' value="{{category.value}}">{{category.name}}</option>
</select>
<select id="theme-cat" name="themecat" >
    <option value="All">All</option>
    <option ng-repeat='subcategory in subcategories' value='{{subcategory.category}}'>{{subcategory.category}}</option>
</select>

两个用于选择最好使用ng-options和ng-model： http://docs.angularjs.org/api/ng.directive:select

关于：

ng-model="{string}"

将控件的选定值与您的模型相关联。

关于：

 [ng-options="{comprehension_expression}"]

它的工作原理如下：

<select ng-model="mySelectedValue" ng-options="c.name for c in categories"></select>

无法使用angular.js动态更新选择框

1 个答案: