分页 class 未在 html 中应用
Pagination class not getting applied in html
我的 html 中有这个 smart-table，为此填充了 20 行。我对这些记录应用了分页，效果也很好。
我的问题是，分页 class 没有应用到分页栏。它就像一个 link 格式。
是否有其他 class 与此重叠？我也在我的js中添加了smart-table模块。
var app = angular.module('adminApp', ['smart-table', 'ngAnimate',
'ngSanitize', 'ui.bootstrap'
]);
我的table:
<table id="botRecordTable" st-table="display_bot_records" st-safe-src="botData" ng-show="botData" class="table table-bordered table-striped shadow p-3 mb-5 bg-white rounded" ng-controller="botRulesController">
<caption style="font-size:0.8rem !important">*BOT Rules.</caption>
<thead class="thead-dark">
<tr>
<th>CASE NO</th>
<th st-sort="decision">RULE</th>
<th st-sort="email">EMAIL</th>
<th st-sort="dob">DOB</th>
<th st-sort="gender">GENDER</th>
</tr>
</thead>
<tbody>
<tr valign="middle" id="{{row.matchPk}}" st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_bot_records">
<td>{{$index + 1}}</td>
<td>
<select id="ruleChangeSelect" ng-change="botRuleChanged()" class="custom-select" style="margin-left:0px; width:auto" ng-model="botDecision" ng-options="choice.name for choice in botDecisions">
</select>
</td>
<td ng-bind="row.email"></td>
<td ng-bind="row.dob"></td>
<td ng-bind="row.gender"></td>
</tr>
</tbody>
<tfoot>
<tr style="font-size:0.8rem !important;">
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"></div>
</td>
</tr>
</tfoot>
</table>
我的分页:
更新:
angular.module("myApp", [])
.constant('POSSIBLE_OPTIONS', ['A', 'B', 'C'])
.controller("MyController", ['POSSIBLE_OPTIONS', function(POSSIBLE_OPTIONS) {
var ctrl = this;
ctrl.display_republish_records = [{
botMainId: "A",
botSet: "HK64604",
botNumber: "786443174705883702"
},
{
botMainId: "A",
botSet: "HK65825",
botNumber: "595143174706013402"
},
{
botMainId: "A",
botSet: "HK67383",
botNumber: "281943174706142702"
},
{
botMainId: "B",
botSet: "HK72557",
botNumber: "922443174706654102"
},
{
botMainId: "B",
botSet: "HK73332",
botNumber: "724243174706716502"
},
{
botMainId: "A",
botSet: "HK74025",
botNumber: "379943174706764502"
},
{
botMainId: "A",
botSet: "HK74694",
botNumber: "825843174706807002"
},
{
botMainId: "C",
botSet: "HK74819",
botNumber: "563543174706827202"
},
{
botMainId: "C",
botSet: "HK75964",
botNumber: "423643174706902802"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "678043174706923902"
}
];
ctrl.posibbleOptions = getUniqueValues(ctrl.display_republish_records, 'botMainId')
.map(optionsMapper);
ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
.map(optionsMapper);
ctrl.selectionModel = {};
angular.forEach(ctrl.display_republish_records, function(bot) {
ctrl.selectionModel[bot.botNumber] = ctrl.posibbleOptions.filter(function(opt) {
return opt.id === bot.botMainId;
})[0];
});
function optionsMapper(id) {
return {
id: id,
name: id
}
}
function getUniqueValues(array, prop) {
return [...new Set(array.map(item => item[prop]))];
}
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
<hr/>
<table>
<tr valign="middle" st-select-row="row" st-select-mode="multiple" ng-repeat="row in $ctrl.display_republish_records track by row.botNumber" ng-attr-id="{{::row.botMainId}}-{{::row.botNumber}}">
<td>
<select class="custom-select" style="margin-left:0px" ng-model="$ctrl.selectionModel[row.botNumber]" ng-options="choice.name for choice in $ctrl.posibbleOptions track by choice.id">
<option value="" hidden readonly="" ng-hide="true"></option>
</select>
</td>
<td ng-bind="row.botSet"></td>
<td ng-bind="row.botNumber"></td>
</tr>
<tr style="font-size:0.8rem !important;">
<td class="text-center" st-pagination="" st-items-by-page="3">
</td>
</tr>
</table>
<hr/>
</div>
我使用的脚本:
<head>
<link rel="icon" type="image/png" href="images/app_brand.png"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" th:href="@{/css/app.css}" href="../../css/app.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Nunito:300" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.min.js.map"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
我还没有第 50 个代表发表评论...
您是否尝试过打开控制台 (F12) 并检查样式选项卡以查看正在应用哪些样式以及来自哪些样式表？这可能会给你最深刻的洞察力。 bootstrap 样式可能会覆盖您添加的样式。如果您希望自定义样式覆盖 bootstrap 样式，则必须在加载 bootstrap 样式表后添加样式表，并且它可能正在加载智能 table 模块。
由于样式的级联特性，如果您在自己的样式表中将样式添加到分页，然后 bootstrap 加载并添加样式，它们将覆盖您的样式。
Smart-table 默认应用 bootstrap.css 类
的分页
证明如下：http://lorenzofox3.github.io/smart-table-website/#section-pagination.
你的主要问题是你使用的是 bootstrap 的最新版本 4.1.0
smart-table 使用 3.3.6 生成分页。我不知道他们什么时候可以提供 smart-table 的更新。但是你可以应用这个 类 来支持你想要的盒子。
我已将 css 部分应用到演示中。请在这里查看
angular.module("myApp", ['smart-table'])
.constant('POSSIBLE_OPTIONS', ['A', 'B', 'C'])
.controller("MyController", ['POSSIBLE_OPTIONS', function(POSSIBLE_OPTIONS) {
var ctrl = this;
ctrl.display_republish_records = [{
botMainId: "A",
botSet: "HK64604",
botNumber: "786443174705883702"
},
{
botMainId: "A",
botSet: "HK65825",
botNumber: "595143174706013402"
},
{
botMainId: "A",
botSet: "HK67383",
botNumber: "281943174706142702"
},
{
botMainId: "B",
botSet: "HK72557",
botNumber: "922443174706654102"
},
{
botMainId: "B",
botSet: "HK73332",
botNumber: "7242431747s6716502"
},
{
botMainId: "A",
botSet: "HK74025",
botNumber: "3799431747067e4502"
},
{
botMainId: "A",
botSet: "HK74694",
botNumber: "82584317g706807002"
},
{
botMainId: "C",
botSet: "HK74819",
botNumber: "56354317470x6827202"
},
{
botMainId: "C",
botSet: "HK75964",
botNumber: "42364317470cxv6902802"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "678043174706xcv923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "6780431747069df23902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "6780431747069ewr23902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470sdf6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470s6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470vb6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "6780431747sdf06923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470sd6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317wer4706923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "678043174706sd923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470a923902"
}
];
ctrl.posibbleOptions = getUniqueValues(ctrl.display_republish_records, 'botMainId')
.map(optionsMapper);
ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
.map(optionsMapper);
ctrl.selectionModel = {};
ctrl.itemsByPage = 5;
angular.forEach(ctrl.display_republish_records, function(bot) {
ctrl.selectionModel[bot.botNumber] = ctrl.posibbleOptions.filter(function(opt) {
return opt.id === bot.botMainId;
})[0];
});
function optionsMapper(id) {
return {
id: id,
name: id
}
}
function getUniqueValues(array, prop) {
return [...new Set(array.map(item => item[prop]))];
}
}]);
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
<hr/>
<table st-table="$ctrl.display_republish_records" class="table table-striped">
<tr valign="middle" st-select-row="row" st-select-mode="multiple" ng-repeat="row in $ctrl.display_republish_records track by row.botNumber" ng-attr-id="{{::row.botMainId}}-{{::row.botNumber}}">
<td>
<select class="custom-select" style="margin-left:0px" ng-model="$ctrl.selectionModel[row.botNumber]" ng-options="choice.name for choice in $ctrl.posibbleOptions track by choice.id">
<option value="" hidden readonly="" ng-hide="true"></option>
</select>
</td>
<td ng-bind="row.botSet"></td>
<td ng-bind="row.botNumber"></td>
</tr> <tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="10" colspan="4">
</td>
</tr>
</tfoot>
</table>
<hr/>
</div>
我的 html 中有这个 smart-table，为此填充了 20 行。我对这些记录应用了分页，效果也很好。
我的问题是，分页 class 没有应用到分页栏。它就像一个 link 格式。
是否有其他 class 与此重叠？我也在我的js中添加了smart-table模块。
var app = angular.module('adminApp', ['smart-table', 'ngAnimate',
'ngSanitize', 'ui.bootstrap'
]);
我的table:
<table id="botRecordTable" st-table="display_bot_records" st-safe-src="botData" ng-show="botData" class="table table-bordered table-striped shadow p-3 mb-5 bg-white rounded" ng-controller="botRulesController">
<caption style="font-size:0.8rem !important">*BOT Rules.</caption>
<thead class="thead-dark">
<tr>
<th>CASE NO</th>
<th st-sort="decision">RULE</th>
<th st-sort="email">EMAIL</th>
<th st-sort="dob">DOB</th>
<th st-sort="gender">GENDER</th>
</tr>
</thead>
<tbody>
<tr valign="middle" id="{{row.matchPk}}" st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_bot_records">
<td>{{$index + 1}}</td>
<td>
<select id="ruleChangeSelect" ng-change="botRuleChanged()" class="custom-select" style="margin-left:0px; width:auto" ng-model="botDecision" ng-options="choice.name for choice in botDecisions">
</select>
</td>
<td ng-bind="row.email"></td>
<td ng-bind="row.dob"></td>
<td ng-bind="row.gender"></td>
</tr>
</tbody>
<tfoot>
<tr style="font-size:0.8rem !important;">
<td colspan="5" class="text-center">
<div st-pagination="" st-items-by-page="itemsByPage" st-displayed-pages="5"></div>
</td>
</tr>
</tfoot>
</table>
我的分页:
更新:
angular.module("myApp", [])
.constant('POSSIBLE_OPTIONS', ['A', 'B', 'C'])
.controller("MyController", ['POSSIBLE_OPTIONS', function(POSSIBLE_OPTIONS) {
var ctrl = this;
ctrl.display_republish_records = [{
botMainId: "A",
botSet: "HK64604",
botNumber: "786443174705883702"
},
{
botMainId: "A",
botSet: "HK65825",
botNumber: "595143174706013402"
},
{
botMainId: "A",
botSet: "HK67383",
botNumber: "281943174706142702"
},
{
botMainId: "B",
botSet: "HK72557",
botNumber: "922443174706654102"
},
{
botMainId: "B",
botSet: "HK73332",
botNumber: "724243174706716502"
},
{
botMainId: "A",
botSet: "HK74025",
botNumber: "379943174706764502"
},
{
botMainId: "A",
botSet: "HK74694",
botNumber: "825843174706807002"
},
{
botMainId: "C",
botSet: "HK74819",
botNumber: "563543174706827202"
},
{
botMainId: "C",
botSet: "HK75964",
botNumber: "423643174706902802"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "678043174706923902"
}
];
ctrl.posibbleOptions = getUniqueValues(ctrl.display_republish_records, 'botMainId')
.map(optionsMapper);
ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
.map(optionsMapper);
ctrl.selectionModel = {};
angular.forEach(ctrl.display_republish_records, function(bot) {
ctrl.selectionModel[bot.botNumber] = ctrl.posibbleOptions.filter(function(opt) {
return opt.id === bot.botMainId;
})[0];
});
function optionsMapper(id) {
return {
id: id,
name: id
}
}
function getUniqueValues(array, prop) {
return [...new Set(array.map(item => item[prop]))];
}
}]);
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
<hr/>
<table>
<tr valign="middle" st-select-row="row" st-select-mode="multiple" ng-repeat="row in $ctrl.display_republish_records track by row.botNumber" ng-attr-id="{{::row.botMainId}}-{{::row.botNumber}}">
<td>
<select class="custom-select" style="margin-left:0px" ng-model="$ctrl.selectionModel[row.botNumber]" ng-options="choice.name for choice in $ctrl.posibbleOptions track by choice.id">
<option value="" hidden readonly="" ng-hide="true"></option>
</select>
</td>
<td ng-bind="row.botSet"></td>
<td ng-bind="row.botNumber"></td>
</tr>
<tr style="font-size:0.8rem !important;">
<td class="text-center" st-pagination="" st-items-by-page="3">
</td>
</tr>
</table>
<hr/>
</div>
我使用的脚本:
<head>
<link rel="icon" type="image/png" href="images/app_brand.png"/>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
<link rel="stylesheet" th:href="@{/css/app.css}" href="../../css/app.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/css/bootstrap-select.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous"/>
<link href="https://fonts.googleapis.com/css?family=Nunito:300" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-sanitize.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.min.js.map"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>
<script src="/js/app.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.1/js/bootstrap-select.min.js"></script>
</head>
我还没有第 50 个代表发表评论...
您是否尝试过打开控制台 (F12) 并检查样式选项卡以查看正在应用哪些样式以及来自哪些样式表？这可能会给你最深刻的洞察力。 bootstrap 样式可能会覆盖您添加的样式。如果您希望自定义样式覆盖 bootstrap 样式，则必须在加载 bootstrap 样式表后添加样式表，并且它可能正在加载智能 table 模块。
由于样式的级联特性，如果您在自己的样式表中将样式添加到分页，然后 bootstrap 加载并添加样式，它们将覆盖您的样式。
Smart-table 默认应用 bootstrap.css 类
的分页证明如下：http://lorenzofox3.github.io/smart-table-website/#section-pagination.
你的主要问题是你使用的是 bootstrap 的最新版本 4.1.0 smart-table 使用 3.3.6 生成分页。我不知道他们什么时候可以提供 smart-table 的更新。但是你可以应用这个 类 来支持你想要的盒子。
我已将 css 部分应用到演示中。请在这里查看
angular.module("myApp", ['smart-table'])
.constant('POSSIBLE_OPTIONS', ['A', 'B', 'C'])
.controller("MyController", ['POSSIBLE_OPTIONS', function(POSSIBLE_OPTIONS) {
var ctrl = this;
ctrl.display_republish_records = [{
botMainId: "A",
botSet: "HK64604",
botNumber: "786443174705883702"
},
{
botMainId: "A",
botSet: "HK65825",
botNumber: "595143174706013402"
},
{
botMainId: "A",
botSet: "HK67383",
botNumber: "281943174706142702"
},
{
botMainId: "B",
botSet: "HK72557",
botNumber: "922443174706654102"
},
{
botMainId: "B",
botSet: "HK73332",
botNumber: "7242431747s6716502"
},
{
botMainId: "A",
botSet: "HK74025",
botNumber: "3799431747067e4502"
},
{
botMainId: "A",
botSet: "HK74694",
botNumber: "82584317g706807002"
},
{
botMainId: "C",
botSet: "HK74819",
botNumber: "56354317470x6827202"
},
{
botMainId: "C",
botSet: "HK75964",
botNumber: "42364317470cxv6902802"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "678043174706xcv923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "6780431747069df23902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "6780431747069ewr23902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470sdf6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470s6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470vb6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "6780431747sdf06923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470sd6923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317wer4706923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "678043174706sd923902"
},
{
botMainId: "B",
botSet: "HK76384",
botNumber: "67804317470a923902"
}
];
ctrl.posibbleOptions = getUniqueValues(ctrl.display_republish_records, 'botMainId')
.map(optionsMapper);
ctrl.posibbleOptionsFromConstant = POSSIBLE_OPTIONS
.map(optionsMapper);
ctrl.selectionModel = {};
ctrl.itemsByPage = 5;
angular.forEach(ctrl.display_republish_records, function(bot) {
ctrl.selectionModel[bot.botNumber] = ctrl.posibbleOptions.filter(function(opt) {
return opt.id === bot.botMainId;
})[0];
});
function optionsMapper(id) {
return {
id: id,
name: id
}
}
function getUniqueValues(array, prop) {
return [...new Set(array.map(item => item[prop]))];
}
}]);
.pagination > li > a,
.pagination > li > span {
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
}
.pagination > li:first-child > a,
.pagination > li:first-child > span {
margin-left: 0;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.pagination > li:last-child > a,
.pagination > li:last-child > span {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
.pagination > li > a:hover,
.pagination > li > span:hover,
.pagination > li > a:focus,
.pagination > li > span:focus {
z-index: 2;
color: #23527c;
background-color: #eee;
border-color: #ddd;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover,
.pagination > .active > a:focus,
.pagination > .active > span:focus {
z-index: 3;
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-smart-table/2.1.11/smart-table.js"></script>
<div ng-app="myApp" ng-controller="MyController as $ctrl">
<hr/>
<table st-table="$ctrl.display_republish_records" class="table table-striped">
<tr valign="middle" st-select-row="row" st-select-mode="multiple" ng-repeat="row in $ctrl.display_republish_records track by row.botNumber" ng-attr-id="{{::row.botMainId}}-{{::row.botNumber}}">
<td>
<select class="custom-select" style="margin-left:0px" ng-model="$ctrl.selectionModel[row.botNumber]" ng-options="choice.name for choice in $ctrl.posibbleOptions track by choice.id">
<option value="" hidden readonly="" ng-hide="true"></option>
</select>
</td>
<td ng-bind="row.botSet"></td>
<td ng-bind="row.botNumber"></td>
</tr> <tfoot>
<tr>
<td class="text-center" st-pagination="" st-items-by-page="10" colspan="4">
</td>
</tr>
</tfoot>
</table>
<hr/>
</div>