角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 
}