Ng显示设置页面
Ng show for settings page
我目前正在开发一个计划扑克应用程序的设置页面。我希望发生的是,只有在"成为scrum大师"被选中时,其余的设置才可见。我看过ng秀,不太确定它是如何工作的,这是我的尝试,但它不起作用,因为所有的东西都是可见的
<section class="mainbar" ng-controller="gameSetupController">
<section class="matter">
<div class="container">
<h3>Create Game</h3>
<form class="form">
<div class="form-group">
<label for="project-selector">Project</label>
<select class="form-control" id="project-selector" ng-model="gameContext.project" ng-options="p.name for p in projects"></select>
</div>
<div class="form-group">
<label for="scrum-master-checkbox">Become Scrum Master</label>
<input id="scrum-master-checkbox" type="checkbox" ng-model="gameContext.isScrumMaster" />
</div>
<div id="scrum-master-options" ng-model="scrum-master-options" ng show="scrum-master-options">
<div class="form-group">
<label>Card Options</label>
<input type="radio" ng-model="gameContext.cardType" value="fibonacci" />Fibonacci (1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144)
<input type="radio" ng-model="gameContext.cardType" value="modified" /> Modified Fibonacci (.5, 1, 2, 3, 5, 8, 13, 20, 40, 100)
</div>
<div class="form-group">
<label>Point Suggestion Method</label>
<input type="radio" ng-model="gameContext.pointSelectionMethod" value="Average3" />Take average if all votes are within three cards
<input type="radio" ng-model="gameContext.pointSelectionMethod" value="Mode" />Take the card selected most often by players
<input type="radio" ng-model="gameContext.pointSelectionMethod" value="Average" /> Take average of all votes
<input type="radio" ng-model="gameContext.pointSelectionMethod" value="None" />Do not suggest story points
</div>
<div class="form-group">
<label for="allowReselectCard">Allow Cards To Be Reselected</label>
<input id="allowReselectCard" type="checkbox" ng-model="gameContext.allowReselectCard" />
</div>
</div>
</form>
<a href="{{href()}}" class="btn btn-primary btn-lg" ng-disabled="gameContext.project.id === undefined" title="{{ gameContext.project.id === undefined ? 'Please select a project' : 'Join the ' + gameContext.project.name + ' game' }}">Join Game</a>
</div>
</section>
将ng-show
绑定到gameContext.isScrumMaster
,因为这是由复选框更新的模型。此外,从包含的div中删除ng-model
,因为它只适用于输入、选择、文本区域和自定义表单控件。
<div id="scrum-master-options" ng-show="gameContext.isScrumMaster">
...
</div>
相关文章:
- 以下数据布局在设置显示上向上移动:无
- 设置显示后Flash对象方法不可用:无
- 简单的设置显示:无/块与javascript
- Cytoscape.js,图形未以正确的设置显示
- 角度中的组合框(选择组件)不基于参数设置显示值
- 设置显示为“未定义”的变量
- EXT JS :在组合框中,如何为不在存储中的记录设置显示字段
- 以递归方式设置“显示:无”,但在特定元素内除外
- 设置显示的元素中文本的最大长度
- 在表行上设置显示动画
- 在跨浏览器的图元上设置显示特性flex
- jQuery .animate()设置显示:none,如何避免
- 根据选择,在下拉列表中设置显示值
- 如何为带有图片的单选按钮设置显示和隐藏标题
- 在外部设置显示样式会导致onclick()事件初始化两次点击
- Json字符串如果键错误设置显示.否则显示数据
- 引导下拉菜单设置显示:当折叠时无
- 按钮点击后设置“显示”:无
- 将选择/保存的值(从数据库)设置/显示到一个选择框中,以便进行编辑
- 将@media与javascript组合以设置显示none/block