Button not clickable until an option (div-tag) has been selected | Angular 1.5

Question

Introduction about my problem

In my app the user will be presented with some options (clickable div tags). The user must select one option to be able to click the "Klar"-button (see image). Also, when an option has been selected, the borders (CSS) of the options needs to change as well with the colour of the button. Because I'm quite new to Angular and unexperienced I'm turning to you wonderful people at Stackoverflow.

Here's the image: (the text is in Swedish if anyone was wondering)

So, here's what I need help with:

1. Making the button clickable only when a user has selected one option.
2. Changing the style of the options border when being clicked, also changing the colour of the button.

NOTE: I had to wait 90 minutes because I posted another question before. However I started to think how I should make the button clickable when a user has selected an option. What if putting a counter that increases when a user has pressed an option? But the span of the counter can only be 0 and 1. Because it can only be one (1) option selected.

0 = not selected an option, which means no clickable button 1 = selected an option, which means clickable button.

It might be a dumb idea, but I wanted to share it with you guys.

CODE:

This is my HTML file at the moment:

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

I am not sure if I should include my CSS, because I don't know if it be to any help, but I will include it anyways.

.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;
}

And no, there is no Javascript (yet).

I am really grateful for all the support I can get.

Thanks!

Answer 1

You can use ng-disabled to achieve what you want. And you have a problem with your conditions. As you're using the same variable style for both options.

See this example: (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>