第一个 DropDown 选择不会触发第二个 DropDown 功能答案

【问题标题】：First DropDown selection doesnt trigger the second DropDown function第一个 DropDown 选择不会触发第二个 DropDown 功能
【发布时间】：2017-01-26 19:37:00
【问题描述】：

我在 MVC 中有 2 个 DropDowns 并尝试使用 AngularJS。我的第一个 DropDown 充满了来自数据库的数据。当用户在第一个 DropDown 上进行选择时，应根据选择填充第二个 DropDown。但是，它不会被触发。我做错了什么？

当我从第一个下拉菜单中选择时，Chrome 控制台显示此错误“未定义”。但是，已经定义了，为什么会出现这个错误呢？

这是我的 html 代码...

<form name="mainForm" ng-controller="PriceListEditController" novalidate>
    <div class="error">{{message}}</div>
    <select id="brandSelect" ng-model="brandSelect" ng-options="b.Id as b.Name for b in brands" ng-change="GetBrandPriceList()">
        <option value="">Marka Seçiniz</option>
        <option ng-repeat="b.Id for b in brands" value="{{b.Id}}">{{b.Name}}</option>
    </select>
    <select ng-model="priceList" ng-options="b.Id as b.Name for b in priceLists">
        <option value="">-- Select Country --</option>
        <option ng-repeat="p.Id for p in priceLists" value="{{p.Id}}">{{p.Name}}</option>
    </select>
</form>

这是我的 JS 代码...

var app = angular.module('PriceListEditModule', []);
app.controller('PriceListEditController', ["$scope", "$q", "$http", function ($scope, $q, $http) {

    $http({
        method: 'GET',
        url: '/GetBrands'
    }).then(function successCallback(response) {
        $scope.brands = response.data;
    }, function errorCallback(response) {
        $scope.message = 'Unexpected Error ' + response.message;
    });

    $scope.GetBrandPriceList = function () {

        console.log($scope.brandSelect);

        var brandId = $scope.brandSelect;

        if (brandId>0) {
            $http({
                method: 'GET',
                url: '/GetBrandPriceList'
            }).then(function successCallback(response) {
                $scope.priceLists = response.data;
            }, function errorCallback(response) {
                $scope.message = 'Unexpected Error ' + response.message;
            });
        }
        else {
            $scope.priceList = null;
        }
    }

}]);

【问题讨论】：

标签： javascript jquery html angularjs drop-down-menu

【解决方案1】：

您在同一个选择部分中使用 ng-options 和 ng-repeat。在你的 html 中试试这个：

<form name="mainForm" ng-controller="PriceListEditController" novalidate>
        <div class="error">{{message}}</div>
        <select id="brandSelect" ng-model="brandSelect" ng-change="GetBrandPriceList()">
            <option value="">Marka Seçiniz</option>
            <option ng-repeat="b in brands" value="{{b.Id}}">{{b.Name}}</option>
        </select>
        test
        <select ng-model="priceList">
            <option value="">-- Select Country --</option>
            <option ng-repeat="p in priceLists" value="{{p.Id}}">{{p.Name}}</option>
        </select>
    </form>

【讨论】：