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

Question

我目前正在学习 angularJS，到目前为止一切顺利，但我遇到了一个我似乎无法弄清楚的问题。

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

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

这是我得到的:

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>