Angular JS & Semantic-UI复选框需要双击

Question

我尝试在带有语义UI的checkbox上操作AngularJS：

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

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

我注意到，当我使用"normal“复选框时，单击标签可以正常工作，但单击输入会更改其状态两次(返回到第一个状态)：

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

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

Answer 1

我只是删除了输入上的hidden类

​

    <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通常不能很好地处理Angular。

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

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