javascript 没有数据显示时显示消息

Question

我正在开发 angularjs 应用程序。我正在根据用户输入的值显示 angular UI 网格。当 angular UI 网格中没有要显示的值时，我想显示一条消息说 No RECORDS FOUND。请找到演示 here

例如，当用户在 From 文本字段中输入 Atlanta 并在 To 文本字段中输入 Chicago 并单击 SearchLocations 时，它将显示 UI 网格。但是当用户输入一些东西而不是显示空白时，我想显示 NO Records 喜欢的消息。另一个问题是我正在尝试添加一个带有单选按钮的列，以便用户在想要 select 行时可以 select 该单选按钮。通过向其添加新列，我无法在网格的每一行中成功显示单选按钮。任何建议都会非常有帮助。作为一个新手面临很多问题需要解决。谢谢。

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

            };
        }]);

HTML代码：

 <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>

我尝试向每一行添加一个单选按钮，但未能显示出来。我尝试将以下代码添加到新添加的列中，以便它在每一行中显示单选按钮，以便用户可以 select 任何一行。

{
          name: 'ReleaseAction', width: '350',
          cellTemplate: '<div class="btn-group" ng-init="releaseAction=0"><input ng-model="releaseAction" type="radio" value="0" style="width:20px">&nbsp;Add</div>'
      },

任何关于在没有要显示的网格时显示消息以及在 UI 网格的每一行中显示单选按钮的建议都会有所帮助。

Answer 1

您可以将 ng-repeat 数据集包装到一个新的 variable 中，您可以在其中检查 'data'.

的可用性

<div ng-repeat="user in filteredUsers = (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-if="!filteredUsers.length">
    No data available
</div>

已更新您的代码，请参阅 Plnkr

javascript 没有数据显示时显示消息

javascript to display message when No data to display

html

jquery

celltemplate

angularjs

angular-ui-grid