Невозможно изменить ng-класс по функции

0

Я пытаюсь изменить ng-класс с помощью переключателя. Класс должен быть изменен в сгенерированной таблице, но он не работает. Я не могу получить доступ к сгенерированной таблице. У вас есть подсказка для меня? Большое вам спасибо за вашу помощь!

Вот jsFiddle

HTML

<button type="button" class="btn btn-danger" ng-click="markingDiagnosis(diagnosisModel)" ng-model="diagnosisModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">Diagnosis ICD</button>
<button type="button" class="btn btn-success" ng-click="markingDrugs(drugsModel)" ng-model="drugsModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">Drugs</button>
<div class="container-fluid">
    <div class="workspaceContainer" ng-repeat="sr in searchresults| filter:search.text" ng-show="currentWorkspace==sr">
        <table data-options="sr.tableOptions" bs-table-control></table>
    </div>
</div>

JS

// Start Bootstrap-Table
// JavaScript source code
(function () {
    angular.module('bsTable', [])
        .directive('bsTableControl', function () {
        return {
            restrict: 'EA',
            scope: {
                options: '='
            },
            link: function (scope, element, attr) {
                $(element).bootstrapTable(scope.options);
                setInterval(function () {
                    $(element).bootstrapTable('resetView');
                }, 500);
            }
        };
    })
})();

var app = angular.module('app', ['ui.bootstrap', 'bsTable']);
app.controller('QueryBuilderCtrl', ['$scope', '$http', '$interval', '$compile',

function ($scope, $http, $compile) {
    var data = '{"group": {"operator": "AND","rules": []}}';

    function computed(group) {
        if (!group) return "";
        for (var str = "(",
        i = 0; i < group.rules.length; i++) {
            i > 0 && (str += " " + group.operator + " ");
            str += group.rules[i].group ? computed(group.rules[i].group) : group.rules[i].field + " " + group.rules[i].condition + " " + group.rules[i].data;
        }

        return str + ")";

    }

    //buttons
    $scope.diagnosisModel = 1;
    $scope.drugsModel = 1;
    $scope.markingDiagnosis = function (diagnosisModel) {
        if (diagnosisModel === 1) {
            $scope.markingDiagnosis = "red"
        } else {
            $scope.markingDiagnosis = "default"
        }
    };
    $scope.markingDrugs = function (drugsModel) {
        if (drugsModel === 1) {
            $scope.markingDrugs = "green"
        } else {
            $scope.markingDrugs = "default"
        }
    };




    //http://wenzhixin.net.cn/p/bootstrap-table/docs/getting-started.html
    $scope.searchresults = [];
    $scope.searchresults.push({
        name: 'Search Results'
    });
    //generate random rows
    $scope.searchresults.forEach(function (sr) {
        sr.rows = [];

        sr.rows[0] = {
            id: '0',
            name: 'Tom',
            age: '38',
            text: '<span ng-class="markingDiagnosis">Lorem ipsum dolor</span> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span ng-class="markingDrugs">Lorem ipsum dolor</span> invidunt ut labore et dolore'
        };
        sr.rows[1] = {
            id: '1',
            name: 'Peter',
            age: '40',
            text: '<span ng-class="markingDiagnosis">Lorem ipsum dolor</span> sit amet, consetetur sadipscing <span ng-class="markingDrugs">Lorem ipsum dolor</span> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore'
        };


        sr.tableOptions = {
            data: sr.rows,
            rowStyle: function (row, index) {
                return {
                    classes: 'none'
                };
            },
            cache: false,
            height: 600,
            striped: true,
            pagination: true,
            pageSize: 10,
            pageList: [5, 10, 25, 50, 100, 200],
            search: false,
            showColumns: true,
            showRefresh: false,
            minimumCountColumns: 2,
            clickToSelect: true,
            showToggle: true,
            maintainSelected: true,
            columns: [{
                field: 'state',
                checkbox: true
            }, {
                field: 'id',
                title: 'ID',
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'name',
                title: 'Name',
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'age',
                title: 'Age',
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'text',
                title: 'Text',
                align: 'left',
                valign: 'top',
                sortable: true
            }]
        };
    });


    $scope.changeCurrentWorkspace = function (sr) {
        $scope.currentWorkspace = sr;
    };

    //Select the workspace in document ready event
    $(document).ready(function () {
        $scope.changeCurrentWorkspace($scope.searchresults[0]);
        $scope.$apply();
    });

    // End Bootstrap-Table

}]);


// Test Highlight


app.filter('highlight', function ($sce) {
    return function (searchresults, phrase) {
        if (phrase) searchresults = searchresults.replace(new RegExp('(' + phrase + ')', 'gi'),
            '<span class="highlighted">$1</span>')

        return $sce.trustAsHtml(searchresults)
    }
})

CSS

.red {
    color: red;
}
.green {
    color: green;
}
.default {
    color: #000000;
}
Теги:
angularjs-scope
angularjs-directive

2 ответа

1
Лучший ответ

Как упоминалось в другом ответе, одна проблема в вашем коде - это изолированная область, а другая - дублированные названия.

Вы могли бы решить это следующим образом:

  1. передайте свои модели подсветки в свою директиву, например, highlight.diagnosisModel
  2. перекомпилируйте свой элемент после добавления jQuery. (Перед сборкой важно удалить атрибут bs-table-control чтобы избежать бесконечного цикла.)

Пожалуйста, найдите демо ниже или здесь, в jsfiddle.

// Start Bootstrap-Table
// JavaScript source code
(function () {
    angular.module('bsTable', [])
        .directive('bsTableControl', function ($compile) {
        return {
            restrict: 'EA',
            scope: {
                options: '=',
                highlight: '='
            },
            link: function (scope, element, attr) {
                console.log(scope.highlight);
                $(element).bootstrapTable(scope.options);
                $(element).bootstrapTable('resetView');
                element.removeAttr('bs-table-control');
                $compile($(element))(scope);
            }
        };
    })
})();

var app = angular.module('app', ['ui.bootstrap', 'bsTable']);
app.controller('QueryBuilderCtrl', ['$scope', '$http', '$interval', '$compile',

function ($scope, $http, $compile) {
    var data = '{"group": {"operator": "AND","rules": []}}';

    function computed(group) {
        if (!group) return "";
        for (var str = "(",
        i = 0; i < group.rules.length; i++) {
            i > 0 && (str += " " + group.operator + " ");
            str += group.rules[i].group ? computed(group.rules[i].group) : group.rules[i].field + " " + group.rules[i].condition + " " + group.rules[i].data;
        }

        return str + ")";

    }

    //buttons
    $scope.highlight = {
        diagnosisModel: 1,
        drugsModel: 1
    };

    $scope.markDiagnosis = function (diagnosisModel) {

        $scope.highlight.markingDiagnosis = diagnosisModel ? "red" : "default";
        console.log($scope.highlight.markingDiagnosis);
        /*if( diagnosisModel === 1 ){
        $scope.markingDiagnosis = "red"
    } else{
       $scope.markingDiagnosis = "default"
    }*/
    };
    $scope.markDrugs = function (drugsModel) {
        console.log(drugsModel);
        if (drugsModel === 1) {
            $scope.highlight.markingDrugs = "green"
        } else {
            $scope.highlight.markingDrugs = "default"
        }
    };




    //http://wenzhixin.net.cn/p/bootstrap-table/docs/getting-started.html
    $scope.searchresults = [];
    $scope.searchresults.push({
        name: 'Search Results'
    });
    //generate random rows
    $scope.searchresults.forEach(function (sr) {
        sr.rows = [];

        sr.rows[0] = {
            id: '0',
            name: 'Tom',
            age: '38',
            text: '<span ng-class="highlight.markingDiagnosis">Lorem ipsum dolor</span> sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor <span ng-class="highlight.markingDrugs">Lorem ipsum dolor</span> invidunt ut labore et dolore'
        };
        sr.rows[1] = {
            id: '1',
            name: 'Peter',
            age: '40',
            text: '<span ng-class="highlight.markingDiagnosis">Lorem ipsum dolor</span> sit amet, consetetur sadipscing <span ng-class="highlight.markingDrugs">Lorem ipsum dolor</span> elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore'
        };


        sr.tableOptions = {
            data: sr.rows,
            rowStyle: function (row, index) {
                return {
                    classes: 'none'
                };
            },
            cache: false,
            height: 600,
            striped: true,
            pagination: true,
            pageSize: 10,
            pageList: [5, 10, 25, 50, 100, 200],
            search: false,
            showColumns: true,
            showRefresh: false,
            minimumCountColumns: 2,
            clickToSelect: true,
            showToggle: true,
            maintainSelected: true,
            columns: [{
                field: 'state',
                checkbox: true
            }, {
                field: 'id',
                title: 'ID',
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'name',
                title: 'Name',
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'age',
                title: 'Age',
                align: 'left',
                valign: 'top',
                sortable: true
            }, {
                field: 'text',
                title: 'Text',
                align: 'left',
                valign: 'top',
                sortable: true
            }]
        };
    });


    $scope.changeCurrentWorkspace = function (sr) {
        $scope.currentWorkspace = sr;
    };

    //Select the workspace in document ready event
    $(document).ready(function () {
        $scope.changeCurrentWorkspace($scope.searchresults[0]);
        $scope.$apply();
    });

    // End Bootstrap-Table

}]);


// Test Highlight


app.filter('highlight', function ($sce) {
    return function (searchresults, phrase) {
        if (phrase) searchresults = searchresults.replace(new RegExp('(' + phrase + ')', 'gi'),
            '<span class="highlighted">$1</span>')

        return $sce.trustAsHtml(searchresults)
    }
})
.red {
    color: red;
}
.green {
    color: green;
}
.default {
    color: #000000;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.1/extensions/filter/bootstrap-table-filter.js"></script>
<link href="https://cdn.rawgit.com/wenzhixin/bootstrap-table/master/dist/bootstrap-table.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-controller="QueryBuilderCtrl" ng-app="app">
    <button type="button" class="btn btn-danger" ng-click="markDiagnosis(highlight.diagnosisModel)" ng-model="highlight.diagnosisModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">Diagnosis ICD</button>
    <button type="button" class="btn btn-success" ng-click="markDrugs(highlight.drugsModel)" ng-model="highlight.drugsModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">Drugs</button>
    <div class="container-fluid">
        <div class="workspaceContainer" ng-repeat="sr in searchresults| filter:search.text" ng-show="currentWorkspace==sr">
            <table data-options="sr.tableOptions" data-highlight="highlight" bs-table-control></table>
        </div>
    </div>
</div>
Поделиться
0

Прежде всего, вы должны быть очень осторожны, я мог видеть, что вы используете одно и то же имя для функции "markingDiagnosis" и ваш логический "markingDiagnosis", который вам нужно отличить от них (аналогично для наркотиков).

Во-вторых, вы должны понимать, как область действия работает в Angular. Директива, которую вы используете для отображения таблицы и вашего контроллера, не имеет той же области действия. Поэтому вам придется поделиться этим значением с директивой и следить за изменениями в вашем директивном контроллере.

По-моему, я бы не стал полагаться на модуль bsTable, в котором я не вижу никакой другой возможности, чем фактически менять всю свою строку каждый раз, когда ваши часы будут менять. Лучшим способом сделать это будет реализация самого шаблона, в котором вы можете напрямую переключать этот класс с помощью директивы и, следовательно, избегать использования часов.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню