要求：我有一个下拉列表，根据所选的选项，应显示相应的内容
HTML：
library(shiny)
library(leaflet)
library(shinyMCE)
ui <- shinyUI(tagList(
shinythemes::themeSelector(),
tags$head(
tags$style(HTML("
.shiny-output-error-validation {
color: green;
}
"))
),
navbarPage(title = "Test App",
navbarMenu("nav bar 1", icon = icon("line-chart"),
"menu 1",
"--------",
tabPanel("Tab1",
tabPanel("panel 1", icon = icon("line-chart"),
pageWithSidebar(
headerPanel(""),
sidebarPanel(tags$head(
tags$style(type="text/css", "select { max-width: 400px; }"),
tags$style(type="text/css", ".span4 { max-width: 400px; }"),
tags$style(type="text/css", ".well { max-width: 400px; }"),
tags$style(type="text/css", '#leftPanel { width:200px; float:left;}')
),
conditionalPanel(condition="input.conditionedPanels==1",
dateRangeInput("daterange1", "Select Date Range:", start = "2017-01-01", end = Sys.Date(), width = "100%")
),
conditionalPanel(condition="input.conditionedPanels==2",
dateRangeInput("daterange2", "Select Date Range:", start = "2017-01-01", end = Sys.Date(), width = "100%"),
selectInput("inputw1", "Select cols:", choices = c("col1","col2","col3"), selected = "col1", multiple = FALSE, width = "100%")
),
conditionalPanel(condition="input.conditionedPanels==3"
)
),
mainPanel(
tabsetPanel(id = "conditionedPanels",
tabPanel("tab 1", value = 1, icon = icon("table"),
br(),
h3("Data Table")
),
tabPanel("tab 2", value=2, icon = icon("line-chart"),
column(width = 5, leafletOutput("map1")
)
),
tabPanel("tab 3", value=3 , icon = icon("table"),
tinyMCE('editor1', 'Click to edit text')
)
)
)
)
)
)
),
navbarMenu("nav bar 2", icon = icon("line-chart"),
"menu 1",
"--------",
tabPanel("Tab1",
tabPanel("panel 2", icon = icon("line-chart"),
pageWithSidebar(
headerPanel(""),
sidebarPanel(tags$head(
tags$style(type="text/css", "select { max-width: 400px; }"),
tags$style(type="text/css", ".span4 { max-width: 400px; }"),
tags$style(type="text/css", ".well { max-width: 400px; }"),
tags$style(type="text/css", '#leftPanel { width:200px; float:left;}')
),
conditionalPanel(condition="input.conditionedPanels1==4",
dateRangeInput("daterange3", "Select Date Range:", start = "2014-01-01", end = Sys.Date(), width = "100%")
),
conditionalPanel(condition="input.conditionedPanels1==5",
dateRangeInput("daterange4", "Select Date Range:", start = "2014-01-01", end = Sys.Date(), width = "100%"),
selectInput("inputw2", "Select cols:", choices = c("col4","col5","col6"), selected = "col1", multiple = FALSE, width = "100%")
),
conditionalPanel(condition="input.conditionedPanels1==6"
)
),
mainPanel(
tabsetPanel(id = "conditionedPanels1",
tabPanel("tab 1", value = 4, icon = icon("table"),
br(),
h3("Data Table")
),
tabPanel("tab 2", value=5, icon = icon("line-chart"),
column(width = 5, leafletOutput("map2")
)
),
tabPanel("tab 3", value=6 , icon = icon("table"),
tinyMCE('editor2', 'Click to edit text')
)
)
)
)
)
)
)
)
)
)
server <- function(input, output, session){ }
shinyApp(ui, server)
现在根据选项我选择应该显示适当的内容。一个人可以有多个角色。
有人能帮助我吗？
答案 0 :(得分：0)
我猜你的页面需要某种标签功能，这对你有帮助吗？
如果是，您可以扩充此代码，以满足您的要求！
(function() {
var app = angular.module('myApp', []);
app.controller('TabController', function() {
this.role = 'A';
this.setTab = function(tabId) {
this.tab = tabId;
};
this.isSet = function(tabId) {
return this.tab === tabId;
};
});
})();<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container">
<section ng-app="myApp" ng-controller="TabController as tab">
<select name="role" id="roleType" ng-model="tab.role" ng-change="tab.setTab(tab.role)" ng-init="tab.setTab(tab.role)">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<div ng-show="tab.isSet('A')">
<h4>Tab 1</h4>
</div>
<div ng-show="tab.isSet('B')">
<h4>Tab 2</h4>
</div>
<div ng-show="tab.isSet('C')">
<h4>Tab 3</h4>
</div>
</section>
</div>
答案 1 :(得分：0)
多个角色意味着您的select需要multiple属性。
因此，您的ngModel必须是数组。
然后，您可以使用Array.prototype.indexOf检查绑定数组中是否存在值。
(function() {
angular
.module('app', [])
})()<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script>
<div class="container" ng-app="app" ng-init="role = []">
<!-- label[for] must match select[id] -->
<label class="col-md-0" for="roleType">Role:</label>
<!-- https://docs.angularjs.org/api/ng/directive/select -->
<select name="role" id="roleType" multiple ng-model="role">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
<!-- consider using ng-if instead of ng-show/ng-hide, if needed -->
<div ng-hide="role.indexOf('A') === -1">Content A</div>
<div ng-hide="role.indexOf('B') === -1">Content B</div>
<div ng-hide="role.indexOf('C') === -1">Content C</div>
</div>