javascript 根据选中的单选按钮隐藏和显示网格，然后单击搜索按钮

Question

我正在开发 angularjs 应用程序。作为一个新手在尝试获得以下提到的场景时面临问题。任何建议都会有所帮助。

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

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

如果您想根据单选按钮选择显示网格：
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.点击button，将Passport 值赋给另一个变量。 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.将您的网格包装在一个 div 中并分配 ng-show 属性

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

4.现在它应该可以工作了。见Working plnkr

Answer 2

参考此示例代码。你很容易理解

Sample Code

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