Search code examples
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>