【AngularJS】【JavaScript】タブ切り替え
とりあえずソースメモ。
列の要素にname, create_time, 有効無効のタブがある感じで、有効無効を切り替えるところの処理。
雑にメモ。
◼︎invalid.html
<tr ng-repeat="user in users" ng-show="sort === -1 || user.is_use === sort"> <td>{{$index}}</td> <td ng-bind="user.username"></td> <td ng-bind="user.create_time"></td> <td> <div class="valid-tab"> <div id="valid-tab-menu"> <ul class="nav nav-pills nav-pills-primary nav-justified country-tab"> <li ng-class="user.is_use === 1 ? 'active' : '' "> <a ng-click="clickIsValid(1, $event, $index)" data-toggle="tab" aria-expanded="true">{{ 'Valid' | translate }}</a> </li> <li ng-class="user.is_use === 0 ? 'invalid active' : 'invalid' "> <a ng-click="clickIsValid(0, $event, $index)" data-toggle="tab" aria-expanded="true">{{ 'Invalid' | translate }}</a> </li> <!-- end ソートタブ --> </div> </div> </td> </tr>
◼︎invalid.js
//有効か無効か取得 $scope.getIsValid = function($index) { var isValid = $scope.users[$index].is_use; $scope.isValid = isValid return $scope.isValid; } //有効無効切り替え $scope.clickIsValid = function(isValid, event, $index) { $scope.isValid = isValid; ValidUser.query({ username: $scope.users[$index].username, is_use: $scope.isValid }).$promise.then( //success function(response) {}, //error function(err) { // $log.error(err); } ); }