Dropdownlist에서 스마트 테이블의 숨겨진 열을 가져옵니다. AngularJS

저는 AngularJS를 처음 접했고, 누구든지이 문제를 해결할 수 있습니다. 4 열이있는 스마트 테이블이 있는데 처음에는 col 3과 col 4을 ng-show=false으로 설정하므로 페이지를로드 할 때 col 1과 col 2 만 표시됩니다. 여기까지는 좋고 좋아요.Dropdownlist에서 스마트 테이블의 숨겨진 열을 가져옵니다. AngularJS

내 질문 : 사용자가 클릭하고 그 열을 표시 할 수 있도록 내가 드롭 다운에서 col3 및 col4을 가질 수 있습니다.

보이는 열 col1, col2, col3를 볼 수있는 경우 만 col4이 드롭 다운에 표시하는 것입니다, 가정, 드롭 다운에없는 사용할 수 있습니다.

미리 감사드립니다.

var myApp = angular.module("myModule", ['smart-table']); 
 

 
myApp.controller('customCtrl', function ($scope) { 
 

 
    var rowCollection = [ 
 
     { col1: "a", col2: "b", col3: "c", col4: "d" }, 
 
     { col1: "a1", col2: "b1", col3: "c1", col4: "d1" }, 
 
     { col1: "a2", col2: "b2", col3: "c2", col4: "d2" }, 
 
     { col1: "a3", col2: "b3", col3: "c3", col4: "d3" }, 
 
     { col1: "a4", col2: "b4", col3: "c4", col4: "d4" }, 
 
     { col1: "a5", col2: "b5", col3: "c5", col4: "d5" }, 
 

 
    ]; 
 

 

 
    $scope.rowCollection = rowCollection; 
 

 

 
});

table { 
 
    border-collapse: collapse; 
 
    font-family: Arial; 
 
} 
 

 
.tablerow:hover { 
 
    background-color: #25CCDA; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
} 
 

 
th { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    text-align: center; 
 
    background-color: #999999; 
 
    cursor:pointer; 
 
}

<!DOCTYPE html> 
 
<html ng-app="myModule"> 
 
<head> 
 
    <title></title> 
 
    <script src="Scripts/angular.js"></script> 
 
    <script src="Scripts/smart-table.debug.js"></script> 
 
    <link href="Style.css" rel="stylesheet" /> 
 
</head> 
 
<body ng-controller="customCtrl"> 
 
    <select> 
 
     <option value="add column">add column</option> 
 
     
 
    </select> 
 
    <br /> 
 
    <br /> 
 
    <table st-table="rowCollection"> 
 

 
     <thead> 
 
      <tr> 
 
       <th>col1</th> 
 
       <th>col2</th> 
 
       <th ng-show="col3">col3</th> 
 
       <th ng-show="col4">col4</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr ng-repeat="row in rowCollection"> 
 
       <td>{{ row.col1 }}</td> 
 
       <td>{{ row.col2 }}</td> 
 
       <td ng-show="col3">{{ row.col3 }}</td> 
 
       <td ng-show="col4">{{ row.col4 }}</td> 
 
      </tr> 
 
     </tbody> 
 
    </table> 
 
</body> 
 
</html>

출처

2016-06-02 Hussain

주변에 다음과 같은 작업을 살펴 당신이 plnkr/jsfiddle 당신이 시도 것을 보여주기 위해 제공 할 수 있나요? – CozyAzure

열 개체 또는 배열을 만들고'ng-show'를 설정하고'ng-options'에 대해 필터링하십시오. – charlietfl

plesae가 plnkr/fiddle을 생성 할 수 있습니까? 실제로 유용 할 것입니다. – Hussain

는

var myApp = angular.module("myModule", []); 
 
myApp.controller('customCtrl', function($scope) { 
 

 
    $scope.enableColumns = function(header) { 
 
    header.visible = !header.visible; 
 
    }; 
 
    $scope.colHeaders = [{ 
 
    name: "col1", 
 
    visible: true 
 
    }, { 
 
    name: "col2", 
 
    visible: true 
 
    }, { 
 
    name: "col3", 
 
    visible: false 
 
    }, { 
 
    name: "col4", 
 
    visible: false 
 
    }] 
 
    var rowCollection = [{ 
 
     col1: "a", 
 
     col2: "b", 
 
     col3: "c", 
 
     col4: "d" 
 
    }, { 
 
     col1: "a1", 
 
     col2: "b1", 
 
     col3: "c1", 
 
     col4: "d1" 
 
    }, { 
 
     col1: "a2", 
 
     col2: "b2", 
 
     col3: "c2", 
 
     col4: "d2" 
 
    }, { 
 
     col1: "a3", 
 
     col2: "b3", 
 
     col3: "c3", 
 
     col4: "d3" 
 
    }, { 
 
     col1: "a4", 
 
     col2: "b4", 
 
     col3: "c4", 
 
     col4: "d4" 
 
    }, { 
 
     col1: "a5", 
 
     col2: "b5", 
 
     col3: "c5", 
 
     col4: "d5" 
 
    } 
 

 
    ]; 
 

 

 
    $scope.rowCollection = rowCollection; 
 

 

 
});

table { 
 
    border-collapse: collapse; 
 
    font-family: Arial; 
 
} 
 

 
.tablerow:hover { 
 
    background-color: #25CCDA; 
 
} 
 

 
td { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
} 
 

 
th { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    text-align: center; 
 
    background-color: #999999; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<!DOCTYPE html> 
 
<html ng-app="myModule"> 
 

 
<head> 
 
</head> 
 

 
<body ng-controller="customCtrl"> 
 
    <select ng-model="selectedItem" ng-change="enableColumns(selectedItem)" ng-options="header.name for header in colHeaders|filter:{visible: false}"> 
 
    </select> 
 
    <br /> 
 
    <br /> 
 
    <table> 
 

 
    <thead> 
 
     <tr> 
 
     <th ng-repeat="header in colHeaders" ng-show="header.visible">{{header.name}}<div><a href="javacript:void(0);" ng-click="enableColumns(header)" >hide</a></div></th> 
 
     
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr ng-repeat="row in rowCollection"> 
 
     <td ng-repeat="header in colHeaders" ng-show="header.visible">{{ row[header.name] }}</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</body> 
 

 
</html>

출처

2016-06-04 16:57:38

감사합니다 nidhish .. tht는 완벽하게 작동합니다. – Hussain

Dropdownlist에서 스마트 테이블의 숨겨진 열을 가져옵니다. AngularJS

답변

관련 문제