javascript显示消息时无数据显示

我正在处理angularjs应用程序。我正在根据用户输入的值显示角度UI网格。我想显示一条消息，说没有记录找到当没有值显示在角度的UI网格。请查看演示here javascript显示消息时无数据显示

当用户在From文本字段中输入Atlanta和Chicago在To文本字段并单击SearchLocations时，它将显示UI网格。当用户键入某些东西而不是显示空白时，我想显示NO记录喜好消息。另一个问题是我想添加一个单选按钮的列，以便用户可以选择该单选按钮时，他们要选择行。我无法成功地在网格的每一行显示单选按钮，并添加一个新列。任何建议都会非常有帮助。作为新手面临着许多问题需要解决。谢谢。

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

当没有网格显示并在UI网格中的每一行显示单选按钮时，显示消息的任何siggestions会很有帮助。

来源

2017-02-10 user3684675

您可以将您的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

来源

2017-02-10 15:09:24

可以请你在我的演示编辑HTTP：// plnkr .co/edit/CZPRn60ufiXcCbc54iye？p =预览。正如我试过那个你建议它没有出现的那个。感谢你的帮助。 – user3684675

看到我更新的答案:) –

感谢它的工作。我在我的帖子中询问的另一个场景是在用户界面网格的每一行显示单选按钮，我试着按照上面的帖子显示，但它没有出现。我接受了答案，但是您能否帮我出来在网格的每一行显示单选按钮，以便用户可以选择任意一行。 – user3684675

javascript显示消息时无数据显示

回答

相关问题