Question

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

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

您需要更改一些内容才能使其按预期运行。

如果要根据单选按钮选择显示网格：
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.将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.将您的网格包裹在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

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

2 个答案: