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

Question

我尝试在使用语义 UI 制作的复选框上使用 AngularJS 进行操作：

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

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

我注意到，当我使用“正常”复选框时，点击标签可以正常工作，但点击输入会改变它的状态两次（返回到第一个状态）：

<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

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