Struts2 <s:checkbox> with 'value=“true” not rendered as preselect if has Angular `ng-model`

问题

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

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>

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

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.

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

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?

回答1:

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.

I have created plnkr to demonstrate it.

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 removes the checked state, because the value is commented

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

来源：https://stackoverflow.com/questions/35502325/struts2-scheckbox-with-value-true-not-rendered-as-preselect-if-has-angular