如果具有 Angular `ng-model`，则带有“value="true" 的 Struts2 <s:checkbox> 不会呈现为预选答案

【问题标题】：Struts2 <s:checkbox> with 'value="true" not rendered as preselect if has Angular `ng-model`如果具有 Angular `ng-model`，则带有“value="true" 的 Struts2 <s:checkbox> 不会呈现为预选
【发布时间】：2016-05-31 20:24:25
【问题描述】：

我观察到 <s:checkbox> 与 Bootstrap 3 和 AngularJS 一起呈现的一种非常特殊的行为。

我的页面中有这两个 <s:checkbox>，由 Bootstrap 3 样式的一些元素包裹：

<div class="col-md-1">
    <div class="form-group">
        <div class="form-other">
            <label for="activaCheck"><s:text name="actividad.busqueda.activa"/></label>
                <s:checkbox class="form-control" id="activaCheck" name="activaCheck" ng-model="formData.activaCheck" value="true"></s:checkbox>
                <s:checkbox class="form-control" id="activaCheck2" name="activaCheck2"  value="true"></s:checkbox>
        </div>
    </div>
</div>

如您所见，它们之间的唯一区别是第一个具有属性ng-model = "xxx"，而第二个没有。

而且，在我的页面中，它们的呈现方式不同，尽管它们都应该是预先选择的，因为我设置了value="true"。而当我们在 FF 中检查时，我们可以看到 第一个 <s:checkbox> 有 checked="checked"，但没有渲染。我在 Chrome 和 FF 中测试过，同样。

我还测试了<input type="checkbox" />，设置了ng-model和checked="checked"，同样：在页面中呈现时未检查。

所以我在考虑 AngularJS 正在接管 Struts 2 负责的部分渲染工作，至少在这种情况下是这样。我想从 AngularJS 的开发者那里得到一些解释，或者这是预期的结果？

【问题讨论】：

如果是角度控制复选框，则通过模型预选。
是的，在页面呈现后继续使用 Angular 并从 Struts2 复选框中获取预先检查的值。
我可以说，如果我们把ng-model 放在这里，复选框会被Angular 接管吗？或者，Angular 在 Struts 之后工作，所以它们可能不一致？
Struts 标签在这种情况下是不相关的。您可以将普通复选框输入与checked="checked" 一起使用，仍然可以获得相同的结果。由于ng-model，Angular 控制了这个输入。
Angular 在客户端工作，Struts 在服务器端工作，但 Angular 并不像社区传播的意识形态那样完美，并且也有缺点与优势相比，效果为零。

标签： angularjs twitter-bootstrap checkbox struts2

【解决方案1】：

我遇到了未选中复选框的问题。因为它有ng-model 属性，所以输入控件绑定到Angular 的$scope。如果范围没有为上面命名的复选框定义属性值，则不会检查它。假设 AngularJS 一初始化就修改 DOM。

我创建了plnkr 来演示它。

你是对的，AngularJS 在文档加载后开始工作。此时 Struts 已经完成了它的工作并将 html 文档返回给浏览器。现在 Angular 继续准备页面只在一个页面上工作。两者相得益彰，但如果用 Struts 来渲染

<input type="checkbox" ng-model="checkboxModel.value1" checked="checked">

Angular 移除选中状态，因为值被注释了

angular.module('checkboxExample', [])
.controller('ExampleController', ['$scope', function($scope) {
  $scope.checkboxModel = {
   //value1 : true,
   value2 : 'YES'
 };
}]);

【讨论】：