Struts2< s:checkbox>其中'value ='true'如果具有Angular模型，则不呈现为预选 [英] Struts2 <s:checkbox> with 'value="true" not rendered as preselect if has Angular `ng-model`

问题描述

我已经观察到< s:checkbox> 以及Bootstrap 3和AngularJS的异常行为.

I have observed a very peculiar behavior of <s:checkbox> rendering along with Bootstrap 3 and AngularJS.

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

I have these two <s:checkbox> in my page, wrapped by some elements of Bootstrap 3 styles:

<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" 属性，而第二个则没有.

As you can see, the only difference between them, is that the first has attribute ng-model = "xxx", while the second doesn't.

并且，在我的页面中，它们的呈现方式有所不同，尽管它们都应该被预先选择，因为我设置了 value ="true" .而且当我们在FF中进行检查时，我们可以看到第一个< s:checkbox> 具有 checked ="checked" ，但未呈现.我已经在Chrome和FF中进行了测试.

And, in my page, they are rendered differently, although they both are supposed to be pre-selected, because I set value="true". And when we inspect in FF, we can see the first <s:checkbox> has checked="checked", but is not rendered. I have tested in Chrome and FF, same.

我还使用设置了 ng-model 和 checked ="checked" 的< input type ="checkbox"/> 进行了测试>，相同:在页面中呈现时未选中.

I have also tested with <input type="checkbox" /> with ng-model set and checked="checked", the same: not checked when rendered in page.

因此，我正在考虑至少在这种情况下，AngularJS会接管Struts 2负责的部分渲染工作.我需要AngularJS开发人员的一些解释，还是这是预期的结果?

So I am thinking about AngularJS is taking over part of rendering job which Struts 2 is responsible of, at least in this case. I want some explanation from developers of AngularJS, or this is the expected result?

推荐答案

我遇到了未选中复选框的问题.因为它具有 ng-model 属性，所以输入控件已绑定到Angular的 $ scope .并且，如果范围未为上述命名复选框定义属性值，则不会选中该属性值.假定AngularJS初始化后立即修改DOM.

I got the problem with unchecked checkbox. Because it has ng-model attribute the input control is bound to Angular's $scope. And if the scope doesn't define the property value for the above named checkbox it's not checked. Assumed that AngularJS modifies DOM as soon as it initializes.

我创建了 plnkr 进行演示.

是的，在文档加载后，AngularJS开始工作.此时，Struts已经完成其工作，并将html文档返回给浏览器.现在，Angular继续准备页面以仅在一页上工作.两者相辅相成，但是如果Struts用于渲染

You are right AngularJS starts working after document is loaded. At this time Struts has already done its work and returned html document to the browser. Now Angular continues to prepare the page to work only on one page. Both complement each other, but if Struts use to render

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

Angular删除选中状态，因为该值已注释

Angular removes the checked state, because the value is commented

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

这篇关于Struts2< s:checkbox>其中'value ='true'如果具有Angular模型，则不呈现为预选的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！