javascript to hide and show the grids based on the radio button selected and click on search button

Question

I am working on angularjs application. Being a newbie facing issues when trying to get the below mentioned scenario.Any suggestions would be helpful.

I want to display one or two angular UI grid's based on the radio button selected at top. When user selects Show one Grid radio button and type Atlanta in From text field and Chicago in To text field and click on SearchLocations button the first angularjs ui grid should be displayed. Similarly when user selects Show two Grids radio button and type Atlanta in From and Chicago in To text field and click on SearchLocations button, two grids should be shown. Please find the demo here.

HTML code:

  <div>
        <label> 
Show one Grid <input type="radio" name="Passport" ng-click="ShowPassport('Y')" /></label>
<label>Show two Grids <input type="radio" name="Passport" ng-click="ShowPassport('N')" />
        </label>
        </div>
    <div class="row">
        <div class="form-group" ng-controller="citiesCtrl">
            <label>From</label>
            <input type="text" ng-model="places[0]" placeholder="Type Departure City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
        </div>
        <div class="form-group" ng-controller="citiesCtrl">
            <label>To</label>
            <input type="text" ng-model="places[1]" placeholder="Type Destination City" typeahead="item for item in items | filter:$viewValue | limitTo:8">
        </div>
    </div>

    <input type="button" value="SearchLocations"  ng-click="submit()">

    <div ng-repeat="user in users | filter: {name: searchValue} : true ">
        <h3>First Grid</h3>
        <div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
    </div>

    <div ng-repeat="user in users | filter: {name: searchValue} : true ">
        <h3>Second Grid</h3>
        <div ui-grid="{ data: user.details }" ng-show="user.show" class="myGrid"></div>
    </div>

js code:

  angular.module('myApp', ['ngAnimate', 'ui.bootstrap','ngTouch', 'ui.grid', 'ui.grid.selection', 'ui.grid.edit','ui.grid.cellNav']);
         angular.module('myApp').controller('citiesCtrl',function($scope){
            // $scope. places = undefined;
            $scope.items = ["Atlanta", "Chicago", "NewYork"];
            $scope.selectAction = function() {
                console.log($scope.places1);

            };
       });

   /*Controller for searchLocations button*/
        angular.module('myApp').controller('searchController', ['$scope', function($scope) {
            $scope.places = ['', ''];
            $scope.searchValue = '';

            $scope.submit = function() {
                if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
                  $scope.searchValue = $scope.places[0] + $scope.places[1];
                }
            };

            $scope.users = [
                {'name' : 'AtlantaChicago',
                    'show' : true,
                    'details' : [
                        {"Travel Date": "10/10/2014",  commute:"Bus"},
                        {"Travel Date": "10/11/2014",  commute:"flight"}]
                },
                {'name' : 'NewYorkChicago',
                    'show' : true,
                    'details': [
                        {"Travel Date": "3/15/2016",  commute:"flight"},
                        {"Travel Date": "10/12/2016",  commute:"flight"},
                    ]
                }
            ];
            $scope.gridOptions = {
                enableFiltering: true,
                columnDefs: [
                    { name: 'Travel Date', width: '5%'},
                    { name: 'Departurecommute', enableFiltering: false, width: '12%' }
                ],
                rowHeight: 20,
                enableHorizontalScrollbar:2

            };
        }]);

Answer 1

You need to change few things in order to get it working as you expected.

If you want to display grids based on radio button selection:
1. you should assign ng-model and value to your radio buttons. Radio buttons in Angular

<label>
        Show one Grid
        <input type="radio" name="Passport" ng-model="Passport" value=1 ng-click="ShowPassport('Y')" />
      </label>
      <label>Show two Grids
        <input type="radio" name="Passport" ng-model="Passport" value=2 ng-click="ShowPassport('N')" />
      </label>

2.Assign the Passport value to another variable on button click. Show hide using Angular

$scope.submit = function() {
      $scope.showGrid = $scope.Passport; //Here
      if ($scope.places[0].length > 0 && $scope.places[1].length > 0) {
        $scope.searchValue = $scope.places[0] + $scope.places[1];
      }
    };

3.Wrap your grids in a div and assign ng-show attribute

<div ng-show="showGrid==='1'||showGrid==='2'"> //first grid
<div ng-show="showGrid==='2'">  //second grid

4.Now it should work. See the Working plnkr

Answer 2

refer this sample code. you can easily understand

Sample Code

https://codepen.io/SusanneLundblad/pen/iBhoJ