按钮不可点击，直到选择了一个选项（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

回答

相关问题