読者です 読者をやめる 読者になる 読者になる

知行合一

とか言ってみる

【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);
        }
    );
}