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

Posted 2023-03-05

【中文标题】Angular JS & Semantic-UI 复选框需要双击

【英文标题】：Angular JS & Semantic-UI checkbox needs double click

【发布时间】：2017-02-11 07:13:34

【问题描述】：

我尝试在使用语义 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 项目，所以非常基本的东西仍然是非常大的问题:) 谢谢。

【参考方案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>

【参考方案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

【讨论】：

对我不起作用——仍然需要那个特殊的“魔法点击”来激活。放弃 - 将尝试仅使用 Semantic JS 中的样式并使用 Angular 对复选框进行操作。