javascript pour afficher le message quand Aucune donnée à afficher

Question

Je travaille sur l'application angularjs. J'affiche la grille d'IU angulaire en fonction des valeurs saisies par l'utilisateur. Je veux afficher un message indiquant Aucun enregistrement n'a été trouvé lorsqu'il n'y a pas de valeurs à afficher dans la grille d'interface utilisateur angulaire. Exemple: lorsque l'utilisateur donne Atlanta dans le champ de texte From et Chicago dans le champ de texte To et clique sur SearchLocations, il affichera la grille de l'interface utilisateur. Exemple:

BUt lorsque l'utilisateur saisit quelque chose au lieu de montrer un blanc, je veux afficher le message de fond NO Records. Un autre problème est que j'essaie d'ajouter une colonne avec bouton radio afin que l'utilisateur peut sélectionner ce bouton radio quand ils veulent sélectionner la ligne. Je ne pouvais pas réussir à montrer le bouton radio dans chaque rangée de la grille en ajoutant une nouvelle colonne. Toutes les suggestions seraient très utiles. Être un débutant face à de nombreux problèmes à résoudre. Merci.

le 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 

      }; 
     }]); 

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

J'ai essayé d'ajouter un bouton radio à chaque ligne, mais n'a pas réussi à obtenir affiché. J'ai essayé d'ajouter le code ci-dessous à la colonne nouvellement ajoutée afin qu'elle affiche le bouton radio dans chaque ligne afin que l'utilisateur puisse sélectionner l'un des rangs.

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

Tout siggestions pour afficher un message lorsqu'il n'y a pas de grille pour afficher et montrer le bouton radio dans chaque ligne de la grille de l'interface utilisateur serait utile.

Answer 1

Vous pouvez enrober votre jeu de données ng-repeat dans un nouveau variable sur lequel vous pouvez vérifier la disponibilité des 'données'.

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

Ensuite, votre point de vue, vous pouvez ajouter un message quand il n'y a aucun résultat:

<div ng-if="!filteredUsers.length"> 
    No data available 
</div> 

mise à jour sur votre code, voir Plnkr