我有两个选择框。根据第一个框的选择填充的一个。
如果第一个框未选择任何内容，我希望隐藏第二个框。
我已尝试以下操作，但一旦您选择一个选项，似乎无法显示该框。
到目前为止，第二个选择框是隐藏的，我希望在第一个选择框中选择某些内容后它能够取消隐藏。
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);
}
})
最佳答案
您可以使用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>关于javascript - 如果在 Angular ng-hide 中未选择任何选项，则隐藏部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44282842/