javascript隱藏並顯示基於單選按鈕的網格，並單擊搜索按鈕

Question

我正在開發angularjs應用程序。作爲一個新手面臨的問題，當試圖得到下面提到的情況。任何建議將是有益的。

我想根據頂部選定的單選按鈕顯示一個或兩個有角度的UI網格。當用戶選擇顯示一個網格單選按鈕並輸入亞特蘭大在From文本字段和芝加哥到文本字段並點擊SearchLocations按鈕應該顯示第一個angularjs UI網格。同樣當用戶選擇顯示兩個網格單選按鈕並輸入亞特蘭大從和芝加哥到文本字段並點擊SearchLocations按鈕，應該顯示兩個網格。 請查閱演示here。

HTML代碼：

<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代碼：

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

您需要更改爲了幾件事情需要得到它的工作，你的預期。

如果您想根據單選按鈕選擇，以顯示網格：
1.你應該分配ng-model和value你的單選按鈕。 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的Passport值上button點擊另一個變量。 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你在一個div電網和分配NG-show屬性

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

4.Now它應該工作。看到Working plnkr

Answer 2

參閱此示例代碼。你可以很容易地理解

Sample Code 

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