JavaScript для отображения сообщения, когда нет данных для отображения

Question

Я работаю над приложением angularjs. Я отображаю угловую сетку пользовательского интерфейса на основе введенных пользователем значений. Я хочу отобразить сообщение " НЕТ ЗАПИСЕЙ НАЙДЕНО", когда нет значений для отображения в угловой сетке пользовательского интерфейса. Пожалуйста, найдите демо здесь

Пример, когда пользователь указывает Atlanta в текстовом поле From и Chicago в текстовом поле To и нажимает SearchLocations, он отображает сетку пользовательского интерфейса. Но когда пользователь печатает какую-то вещь вместо того, чтобы показывать пустым, я хочу отобразить сообщение "НЕТ записей". Еще одна проблема - я пытаюсь добавить столбец с переключателем, чтобы пользователь мог выбрать этот переключатель, когда он хочет выбрать строку. Я не смог показать радио-кнопку в каждом ряду сетки, добавив в нее новый столбец. Любые предложения будут очень полезны. Будучи новичком, сталкивающимся со многими проблемами. Благодарю.

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>

Я попытался добавить переключатель в каждую строку, но не смог отобразить его. Я попытался добавить приведенный ниже код во вновь добавленный столбец, чтобы он отображал переключатель в каждой строке, чтобы пользователь мог выбрать любую из строк.

{
          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>'
      },

Любые подписи для отображения сообщения, когда нет сетки для отображения, и для отображения переключателя в каждой строке в сетке пользовательского интерфейса, было бы полезно.

Answer 1

Вы могли бы обернуть ng-repeat набор данных в новый variable на котором вы можете проверить наличие "данных".

<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