内容 select 选项基于之前的 select 选项 angularjs

content select option based on previous select option angularjs

我想创建 2 个 select 选项,其中另一个 selected 选项的内容基于前一个选项。这是我的 html

<div class="col-sm-2">
            <select class="form-control" ng-model="y">
                <option value="1">a</option>
                <option value="2">b</option>
            </select>
        </div>
        <div class="col-sm-2">
            <select class="form-control" ng-model="z">
                <option ng-repeat = "x in list" value="{{x.idproduct}}">{{x.descproduct}}</option>
            </select>
        </div>

但是有错误,另一个select选项不会像这张图那样显示

这是我的 js 文件

if ($scope.y === 1) {
         $scope.list = [
          {idproduct:"13", descproduct:"cc"},
          {idproduct:"14", descproduct:"dd"}
         ]; 
       }
       if ($scope.y === 2) {
         $scope.list = [
          {idproduct:"15", descproduct:"ee"}
         ]; 
       }

您的选项的值为字符串value="2"

并且您将其与整数进行比较 if ($scope.y === 2)

您应该将其比较为 if ($scope.y === '2')if (parseInt($scope.y) === 2)

您需要绑定 change 事件,以便您的列表在您的值更新时得到更新。另外,您的 === 可能会导致问题。使用 ===,您的字符串值将与整数 1 和 2 进行比较。
这是一个笨蛋:ng-change for change in dropdown

<select class="form-control" ng-model="y" ng-change="updateList()">
     <option value="1">a</option>
     <option value="2">b</option>
</select>
$scope.updateList()={
if ($scope.y == 1) {
         $scope.list = [
          {idproduct:"13", descproduct:"cc"},
          {idproduct:"14", descproduct:"dd"}
         ]; 
       }
       if ($scope.y == 2) {
         $scope.list = [
          {idproduct:"15", descproduct:"ee"}
         ]; 
       }
}

创建一个函数并将您的 Js 代码放入该函数中,并在第一个下拉菜单的 ng-change 上调用该函数。在这里,如果条件在应用程序初始化期间执行一次。因此,通过触发 ng-change,我们可以调用函数并根据选择更新列表。