Ng显示设置页面

Ng show for settings page

本文关键字:设置 显示 Ng      更新时间:2023-09-26

我目前正在开发一个计划扑克应用程序的设置页面。我希望发生的是,只有在"成为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>