在选择选项（div-tag）之前，按钮不可点击 |角度 1.5

Question

关于我的问题的介绍

在我的应用中，用户将看到一些选项（可点击的 div 标签）。用户必须选择一个选项才能点击“Klar”按钮（见图）。此外，当一个选项被选中时，选项的边框 (CSS) 也需要随着按钮的颜色而改变。因为我对 Angular 还很陌生，而且经验不足，所以我在 Stackoverflow 向你们这些优秀的人求助。

图片如下：（如果有人想知道，文字是瑞典语）

所以，我需要帮助：

1. 仅在用户选择一个选项时使按钮可点击。
2. 单击时更改选项边框的样式，同时更改按钮的颜色。

注意：我不得不等待 90 分钟，因为我之前发布了另一个问题。然而，我开始思考当用户选择一个选项时我应该如何使按钮可点击。如果在用户按下选项时放置一个增加的计数器怎么办？但是计数器的跨度只能是 0 和 1。因为它只能选择一 (1) 个选项。

0 = 没有选择一个选项，这意味着没有可点击的按钮 1 = 选择了一个选项，这意味着可点击的按钮。

这可能是一个愚蠢的想法，但我想与你们分享。

代码：

这是我目前的 HTML 文件：

    <!-- The first option -->
<div class="info-box" ng-class="{'info-box-active': style}" ng-click="style=!style">
    <div class="box-row">
        <div class="header">
            <p class="leftText">IKANO Bostad</p>
            <p class="rightText">Leveransrum</p>
        </div>
    </div>

    <div class="box-row">
        <div class="fields">
            <p class="leftText">Folkungagatan 100</p>
            <p class="rightText">10 kr/månad</p>
        </div>
    </div>
</div>

<!-- The second option -->
<div class="info-box" ng-class="{'info-box-active': style}" ng-click="style=!style">
    <div class="box-row">
        <div class="fields mixed">
            <p class="leftText">Lägg till en ny leveransbox</p>
            <p class="rightText">0 kr/månad</p>
        </div>
    </div>
</div>

<!-- The button that needs to change color -->
<div class="row row-white">
    <div class="col col-white">
        <button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="startApp()">Klar</button>
    </div>
</div>

我不确定是否应该包含我的 CSS，因为我不知道它是否有任何帮助，但无论如何我都会包含它。

.main-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 10px;
}

.info-box {
    border-radius: 10px;
    border-width: 3px;
    background-color: white;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-right: 20px;
    border: 2px solid grey;
}

.info-box-active {
    border-radius: 10px;
    border-width: 3px;
    background-color: white;
    margin-bottom: 40px;
    margin-left: 20px;
    margin-right: 20px;
    border: 2px solid #50b3b6;
}

.box-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-left: 20px;
    margin-right: 20px;
}

.box-row > .header {
    color: #50b3b6;
}

.leftText {
    float: left;
    margin: 10px 10px 10px;
}

.rightText {
    float: right;
    margin: 10px 10px 10px;
}

.box-row > .fields {
    color: #8b8c8d;
}

.box-row > .fields.mixed > .leftText {
    color: #50b3b6;
}

.box-row > .fields.mixed > .rightText {
    color: #8b8c8d;
}

不，还没有 Javascript。

我非常感谢我能得到的所有支持。

谢谢！

Answer 1

您可以使用ng-disabled 来实现您想要的。你的条件有问题。当您对这两个选项使用相同的变量 style 时。

看这个例子：(PLUNKER)

<!-- The first option -->
<div class="info-box" ng-class="{'info-box-active': style1}" 
     ng-click="style1 = !style1; style2 = false">
    <!-- Your content here -->
</div>

<!-- The second option -->
<div class="info-box" ng-class="{'info-box-active': !style2}" 
     ng-click="style2 = !style2; style1 = false">
    <!-- Your content here -->
</div>

<div>
    <button type="button" ng-disabled="!style1 && !style2" ng-click="startApp()">Klar</button>
</div>