Question

我在MVC中有2个DropDowns并尝试使用AngularJS。我的第一个DropDown充满了来自DB的数据。当用户在第一个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;
        }
    }

}]);

Answer 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>

第一个DropDown选择不会触发第二个DropDown函数

1 个答案: