Question

我想创建2个选择选项，其中一个选择的内容基于前一个选项。这是我的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>

但是有错误，其他选择选项不会显示此图片中的选项

这是我的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"}
         ]; 
       }

Answer 1

您的选项的值是字符串if ($scope.y === 2)

您将其与整数if ($scope.y === '2')

进行比较

您应该将其与if (parseInt($scope.y) === 2)或CTE

进行比较

Answer 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"}
         ]; 
       }
}

Answer 3

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

内容选择选项基于先前的选择选项angularjs

3 个答案: