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复选框的任何副本需要被激活＆＃34;点击一下。首先单击是更改值，但不更改外观。然后我的Semantic-ui复选框总是落后一步 - 它显示与＆＃34;值＆＃34;下保存的状态相反的状态。变量

我注意到，当我使用＆＃34;正常＆＃34;复选框，单击标签工作正常，但点击输入改变它的状态两次（返回到第一个状态）：

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

Angular JS＆amp; Semantic-UI复选框需要双击

2 个答案: