按鈕不可點擊，直到選擇了一個選項（div-tag）|角1.5

介紹一下我的問題按鈕不可點擊，直到選擇了一個選項（div-tag）|角1.5

在我的應用程序，用戶將有一些選項（可點擊的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（還）。

我真的很感謝所有的支持，我可以得到。

謝謝！

來源

2017-06-20 Martin Nordström

你可以做這樣的事情'<按鈕NG點擊= 「風格&&的startApp（）」> KLAR'如果你想調用函數的一些選項被選中後，。或者，如果你想禁用按鈕，直到選擇了一個選項，那麼'' –

Woow！我不知道「禁用」@ The.Bear。有很多不同的指令哈哈！如果沒有選擇選項，該按鈕現在被禁用，謝謝！現在最後一個問題是，只有其中一個按下時，這兩個div的類都會發生更改。 –

您可以使用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>

來源

2017-06-20 20:01:55

非常感謝！ –

按鈕不可點擊，直到選擇了一個選項（div-tag）|角1.5

回答

相關問題