角JS和语义的UI复选框需要双击

Question

我尝试与复选框AngularJS与语义UI作出操作：

<div class="ui checkbox" ng-click="myCtrl.value=!myCtrl.value"> 
<input type="checkbox" class="hidden" ng-model="myCtrl.value"/> 
<label>Property</label> 
</div> 

它看起来，像我语义的UI复选框的任何副本需要“激活“通过点击。第一次点击是改变价值，但不是外观。然后我的Semantic-ui复选框总是落后一步 - 它显示与保存在“value”变量下的状态相反的状态。

我注意到，那是我用“正常”的复选框，点击标签工作正常，但点击输入改变其状态两次（返回到第一状态）：

<div ng-click="myCtrl.value=!myCtrl.value"> 
<label><input type="checkbox" ng-model="myCtrl.value"/> Property</label> 
</div> 

这可能是一些非常基本的东西，但是当我正在研究我的第一个Angular项目时，真正基本的东西仍然是很大的问题:)谢谢。

Answer 1

我只是取消了对输入

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" /> 
 
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
    <div class="ui checkbox" ng-click="myCtrl.value=!myCtrl.value"> 
 
     <input type="checkbox" ng-model="myCtrl.value" /> 
 
     <label>Property</label> 
 
    </div>

Answer 2

语义的JS往往不能与角发挥很好的hidden类。

您可能需要在控制器中明确设置复选框的外观。

<div class="ui checkbox" ng-click="setValue()"> 
    <input type="checkbox" class="hidden" ng-model="myCtrl.value"/> 
    <label>Property</label> 
</div> 

然后在你的控制器：

myCtrl.setValue = function() { 
    myCtrl.value = !myCtrl.value; // sets value 
    $('.ui.checkbox').checkbox(myCtrl.value ? 'check' : 'uncheck'); // updates checkbox appearance to match 
}