Question

我有两个选择框。根据第一个框的选择填充一个。

如果第一个框中没有选择任何内容，我希望隐藏第二个框。

我尝试过以下操作，但一旦选择了选项，似乎无法显示该框。

到目前为止隐藏了第二个选择框，我希望在第一个选择框中取消隐藏它。

HTML

<div class="text-center">
    <h3 style=" color: blue;">What would you like to do</h3>
</div>

<div class="form-group">
    <div ng-controller="dropDown">
        <select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
            <option value="">- Please Choose -</option>
        </select>

        <select ng-model="formData.format"
                ng-options="format.id as format.name for format in formData.ProductAndFormat.format"
                ng-hide="product.name == null">
            <option value="">- Please Choose -</option>
        </select>
    </div>
</div>

<div class="form-group row">
    <div class="col-xs-6 col-xs-offset-3">
        <a ui-sref="form.end" class="btn btn-block btn-info">
            Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </a>
    </div>
</div>

JS

angular.module('MyFirstAngularApp')

    .controller('dropDown', function ($scope) {

    $scope.productsandformats = [{
        "name": "product 1",
        "format": [{
            "name": "format 1",
            "id": "1"
        }, {
            "name": "format 2",
            "id": "2"
        }]
    }, {
        "name": "product 2",
        "format": [{
            "name": "format 3",
            "id": "3"
        },{
            "name": "format 2",
            "id": "2"
        },
            {
            "name": "format 4",
            "id": "4"
        }, {
            "name": "format 5",
            "id": "5"
        }]
    }];

    $scope.user = {productName: $scope.productsandformats[0], format: '1'};

    $scope.displayModalValue = function () {
        console.log($scope.user.productName);
    }

})

Answer 1

您可以使用ng-if="formData.ProductAndFormat"来显示/隐藏第二个选择

angular.module('MyFirstAngularApp', []).controller('dropDown', function($scope) {

  $scope.productsandformats = [{
    "name": "product 1",
    "format": [{
      "name": "format 1",
      "id": "1"
    }, {
      "name": "format 2",
      "id": "2"
    }]
  }, {
    "name": "product 2",
    "format": [{
        "name": "format 3",
        "id": "3"
      }, {
        "name": "format 2",
        "id": "2"
      },
      {
        "name": "format 4",
        "id": "4"
      }, {
        "name": "format 5",
        "id": "5"
      }
    ]
  }];

  $scope.user = {
    productName: $scope.productsandformats[0],
    format: '1'
  };

  $scope.displayModalValue = function() {
    console.log($scope.user.productName);
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="MyFirstAngularApp" ng-controller="dropDown">
  <div class="form-group">
    <div ng-controller="dropDown">
        <select ng-model="formData.ProductAndFormat" ng-options="product.name for product in productsandformats">
            <option value="">- Please Choose -</option>
        </select>

        <select ng-model="formData.format"
                ng-options="format.id as format.name for format in formData.ProductAndFormat.format"
                ng-if="formData.ProductAndFormat">
            <option value="">- Please Choose -</option>
        </select>
    </div>
</div>

<div class="form-group row">
    <div class="col-xs-6 col-xs-offset-3">
        <a ui-sref="form.end" class="btn btn-block btn-info">
            Next Section <span class="glyphicon glyphicon-circle-arrow-right"></span>
        </a>
    </div>
</div>
</body>

Answer 2

将整个对象分配到第一个选择框ng-model，并在第二个选择框中重复该变量

演示

angular.module("app",[])
.controller("ctrl",function($scope){
$scope.productsandformats = [{
    "name": "product 1",
    "format": [{
        "name": "format 1",
        "id": "1"
    }, {
        "name": "format 2",
        "id": "2"
    }]
}, {
    "name": "product 2",
    "format": [{
        "name": "format 3",
        "id": "3"
    },{
        "name": "format 2",
        "id": "2"
    },
        {
        "name": "format 4",
        "id": "4"
    }, {
        "name": "format 5",
        "id": "5"
    }]
}];

})

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
 <select ng-model="formData.name"
                ng-options="format as format.name for format in productsandformats" >
            <option value="">- Please Choose -</option>
 </select>
 <select ng-model="formData.format"
                ng-options="format.id as format.name for format in formData.name.format"
                ng-hide="!formData.name">
            <option value="">- Please Choose -</option>
 </select>
</div>

如果在角度ng-hide中未选择任何选项，则隐藏部分

2 个答案: