gpt4 book ai didi

javascript - 如果在 Angular ng-hide 中未选择任何选项,则隐藏部分

转载 作者:行者123 更新时间:2023-12-01 03:36:04 27 4
gpt4 key购买 nike

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

如果第一个框未选择任何内容,我希望隐藏第二个框。

我已尝试以下操作,但一旦您选择一个选项,似乎无法显示该框。

到目前为止,第二个选择框是隐藏的,我希望在第一个选择框中选择某些内容后它能够取消隐藏。

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/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com