메시지를 표시 할 자바 스크립트가 표시되지 않습니다.

Question

나는 angularjs 응용 프로그램을 작성 중입니다. 사용자가 입력 한 값을 기준으로 각도 UI 격자를 표시하고 있습니다. 각도 UI 그리드에 표시 할 값이 없을 때 No RECORDS FOUND이라는 메시지를 표시하려고합니다. 데모를 찾으십시오 here

사용자가 애틀란타에게 보낸 사람 텍스트 필드와 시카고를받는 사람 텍스트 필드에 입력하고 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 그리드의 모든 행에 라디오 버튼을 표시하는 것은 도움이 될 것입니다.

Answer 1

'데이터'의 사용 가능 여부를 확인할 수있는 variable에 ng-repeat 데이터 집합을 래핑 할 수 있습니다. 어떤 결과가 없을 때 메시지를 추가 할 수 있습니다보기에 그런

<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