Question

我目前正在开发一个我正在开发的计划扑克应用程序的设置页面。我希望发生的是，只有在＆＃34;成为scrum master后才能看到其余的设置＆＃34;。我看过ng-show并且不太确定它是如何工作的，这是我的尝试，但它不起作用，因为一切仍然可见

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

Answer 1

将ng-show绑定到gameContext.isScrumMaster，因为这是通过复选框更新的模型。另外，从包含div中删除ng-model，因为它仅适用于输入，选择，textareas和自定义表单控件。

<div id="scrum-master-options" ng-show="gameContext.isScrumMaster">
   ...
</div>

Ng显示设置页面

1 个答案: