Question

关于我的问题的介绍

在我的应用中，将向用户显示一些选项（可点击的div标签）。用户必须选择一个选项才能点击“Klar”按钮（参见图片）。此外，选择选项后，选项的边框（CSS）也需要更改按钮的颜色。因为我对Angular很新，而且没有经验，所以我会向Stackoverflow的优秀人士求助。

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

所以，这是我需要帮助的地方：

当用户选择一个选项时，可以点击按钮。
单击时更改选项边框的样式，同时更改按钮的颜色。

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

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

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

CODE：

目前这是我的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>

在选择了选项（div-tag）之前，按钮不可单击Angular 1.5

1 个答案: