Question

我尝试使用切换按钮更改ng-class。应该在生成的表中更改类，但它不起作用。我无法访问生成的表。你有小费吗？非常感谢你的帮助！

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

Answer 1

正如在另一个答案中提到的，代码中的一个问题是孤立的范围，另一个是重复的范围。

你可以这样解决：

将您的突出显示模型传递到您的指令中，例如highlight.diagnosisModel
在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>

Answer 2

首先，你应该非常小心，我可以看到你为你的功能使用相同的名称＆＃34; markingDiagnosis＆＃34;和你的布尔＆＃34; markingDiagnosis＆＃34;你需要区分那些（同样是药物）。

其次，您应该了解范围在Angular中的工作原理。用于显示表和控制器的指令不共享相同的范围。因此，您必须将该值与指令共享，并注意指令控制器中的更改。

在我看来，我不会依赖于模块bsTable，在这个模块中我看不到任何其他机会，而不是每次看到更改时实际更改整行。更好的方法是自己实现模板，在该模板中可以直接使用指令切换此类，从而避免使用watch。

无法按功能更改ng-class

2 个答案: