ng-change在Select中不起作用

Question

我不知道发生了什么，但这个功能似乎根本不起作用。

以下是我的观点：

<tr>
    <th>Category</th>
    <td>
       <select class="form-control" ng-model="masterlist.category_id" ng-options="c.category_id as c.category_name for c in category" required data-ng-change="getSubCategory(c.category_id)"></select>
    </td>
</tr>
<tr>
     <th>Sub Category</th>
     <td>
                                                <select class="form-control" ng-model="masterlist.sub_category_id" ng-options="c.sub_category_id as c.sub_category_name for c in subCategory" required></select>
     </td>
</tr>

Angular JS

$scope.getSubCategory = function (category_id) {
        $http.get('/MasterList/SubCategory' + category_id).then(function ($response) {
            $scope.subCategory = $response.data;
        });
    }

控制器：

public ActionResult SubCategory(int id)
        {
            db.Configuration.ProxyCreationEnabled = false;
            return Json(db.Sub_Category.Where(x => x.active_flag == true && x.category_id == id).ToList(), JsonRequestBehavior.AllowGet);
        }

我检查控制台但没有任何错误，这里是inspect元素视图：

我的主要目标是一旦选择了类别，子类别的显示将只是该类别下的那些。

提前感谢您的帮助。

Answer 1

您的选择元素的ng-model设置为masterlist.category_id。所以你应该把它传递给你的getSubCategory方法。

<select class="form-control" ng-model="masterlist.category_id"
        ng-options="c.category_id as c.category_name for c in vm.category" 
        required data-ng-change="vm.getSubCategory(masterlist.category_id)"></select>

此外，您还需要使用网址格式SubCategory/3发送请求，其中3是类别ID值。使用您当前的代码，它将向SubCategory3发出请求，如果您浏览了浏览器网络标签，则会看到404错误。

您应该在catetory_id变量和操作方法名称之间添加/，

$http.get('Home/SubCategory/' + category_id)

我还建议将您的http调用移动到可以注入控制器的数据服务。 Als，你不应该在你的js文件中硬编码url。尝试使用Url.Action帮助程序方法为您的操作方法/ api端点生成正确的相对网址，如this post和此帖中所述。