AngularJS : 테이블에 나타나는 열을 동적으로 제어합니다.

Question

서버에서 응답 (JSON)을 받으면 테이블의 열을 선택적으로 제어하고 싶습니다.

HTML : 내 JS에서

<div ng-controller='browserStatsController'> 
<select id="searchTypeDropdown" name="searchTypeDropdown" 
    ng-model="searchtype" ng-options="s.value as s.name for s in searchtypelist"> 
</select> 
<input name="BrowserStatsBtn" id="BrowserStatsBtn" type="button" 
    value="Get Browser Statistics" ng-click="loadBrowserStats()"> 
<table id="browserDetailView"> 
    <tr class="DataGridHeading"> 
     <th>Browser</th> 
     <th>Browser Version</th> 
     <th>Count</th> 
     <th>Percentage</th> 
    </tr> 
    <tr ng-repeat="stat in browserstats"> 
     <td>{{stat.BrowserType}}</td> 
     <td>{{stat.BrowserVersion}}</td> 
     <td>{{stat.Count}}</td> 
     <td>{{stat.Percent}}</td> 
    </tr> 
</table> 

, 내가 가진 :

myApp.controller('browserStatsController', function ($scope, myFactory) { 
       $scope.loadBrowserStats = function() { 
        $scope.asyncObj.args.Search.SearchType = $scope.searchtype; 
        myFactory.getStatsAsync(function (callback) { 
         $scope.browserStats = callback.result; 
         $scope.error = callback.error; 
        }, $scope.asyncObj); 
       }; 

       $scope.search = { 
        SearchType: undefined, 
        StartDate: undefined, 
        EndDate: undefined, 
        TimePeriod: undefined 
       }; 

       $scope.searchtypelist = [ 
        { 
         name: 'Browsers Only', 
         value: 'b' 
        }, 
        { 
         name: 'Browser and Version', 
         value: 'v' 
        } 
       ]; 

       $scope.asyncObj = { 
        method: "GetBrowserStats", 
        args: { Search: $scope.search } 
       }; 
      }); 

내 서버 방법에 내 전화를 제출

, 나는의 유형에 대한 값을 제공하고있다 검색이 수행됩니다 ('b'또는 'v'). 이것은 되돌아 오는 JSON 응답의 모양에 영향을 미칩니다. 제출 된 검색 유형 'v'는 객체 내의 BrowserVersion 속성을 포함하는 JSON 응답을 반환합니다. (표에서 tr 요소의 ng-repeat를 참조하십시오.) 검색 유형 'b'에는이 특성이 없습니다.

그래서 검색 유형의 값에 따라 '브라우저 버전'열이 내 테이블에 나타나는지 여부를 동적으로 제어하고 싶습니다. 저는 Angular를 처음 접했으므로이 문제를 어떻게 해결해야할지 모르겠습니다. 너는 무엇을 할 것이냐? DOM에 동적으로 추가 하시겠습니까? 테이블에서 컬럼 가시성을 토글하려면 jQuery (또는 다른 것?)을 사용 하시겠습니까?

오늘 아침 ng-grid로이 작업을했습니다. 그러나 gridOptions에서 데이터가 변경되면 변경 사항을 끝없이 소화하기 시작했습니다. 그 이유를 파악하기 위해 포기했습니다. (요청 및 응답은 끝없이 반복되지 않았습니다.) (각도 1.2.9)

이 솔루션을 사용하여 IE 8에서 실행해야합니다. (따라서 각도 1.2.9 ...)

중복 면책 조항 : 중복 질문을 할 수도 있습니다. 나는 현재 (그리고 주어진 답을 이해하려고 노력하면서) 비슷한 질문을 읽고있다. here.

죄송합니다. 코드를 너무 많이 게시했습니다. (Stackoverflow 편집자는 나를 위해 그것을 chide ...) 내가 분명하지 않은 경우 알려 주시기 바랍니다. 아니면 그냥 무딘.

감사합니다.

Answer 1

ng-show를 사용하거나 DOM 요소를 제공하는 표현식에 따라 렌더링 할 수있는 ng-show를 사용해보십시오. 예 : '<'ng-if = "showSomethingUnique()"th 및 td에 대해 수행합니다.

컨트롤러에서와 같이 서버 응답에 따라 bool을 반환하는 showSomethingUnique를 만듭니다.