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

Question

我尝试在使用 Semantic 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 复选框总是落后一步 - 它显示与“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>