javascriptangularjsdrop-down-menung-hide

Hide section if no option selected in angular ng-hide


I have a two selection boxes. One that is populated depending on the selection of the first box.

I wish to hide the second box if nothing is selected in the first.

I have tried the following but cant seem to get the box to show once you select a option.

so far the second selection box is hidden, I wish for it to un-hide once something has been selected in the first.

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);
    }

})

Solution

  • You can use ng-if="formData.ProductAndFormat" to show/hide second select

    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>