內容選擇選項基於先前的選擇選項angularjs

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

您的選項的值是String value="2"

並且你將它與Integer進行比較if ($scope.y === 2)

您應該比較if ($scope.y === '2')或if (parseInt($scope.y) === 2)

Answer 2

您需要綁定change事件，以便在更新值時更新列表。 加上你的===可能會導致問題。 使用===您的字符串值將與整數1和2進行比較。
這是一個plunker： 更改下拉菜單的ng-change

<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，我們可以調用函數並根據選擇更新列表。