javascript 根据所选的单选按钮隐藏和显示网格并单击搜索按钮

Question

我正在开发 angularjs 应用程序。作为一个新手，在尝试获得下面提到的 scenario.Any 建议时会遇到问题。

我想根据顶部选择的单选按钮显示一个或两个 angular UI 网格。当用户选择 Show one Grid 单选按钮并在 From 文本字段中键入 Atlanta 并在 To 文本字段中键入 Chicago 并单击 SearchLocations 按钮应该显示第一个 angularjs ui 网格。同样，当用户选择“显示两个网格”单选按钮并在 From 中键入 Atlanta 并在 To 文本字段中键入 Chicago 并单击 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

参考这个示例代码。你可以很容易地理解

Sample Code

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

Answer 2

您需要做一些更改才能使其按预期工作。

如果要根据单选按钮选择显示网格：
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

javascript 根据所选的单选按钮隐藏和显示网格并单击搜索按钮

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

html

javascript

angularjs

angular-ui-grid