Question

我在html页面上使用AngularJS生成了以下复选框：

<div ng-controller="MirrorCheckboxController">
    <div ng-repeat="setting in settings">
        <input type="checkbox" 
               ng-attr-id="{{ setting.id }}"
               ng-model="checkedElements[setting.id]"
               ng-click="callSaveFunction(setting.id)"> 

        <label ng-attr-for="{{ setting.id }}">
            <span class="checkbox">{{setting.name}}</span>
        </label> 
    </div>                  
</div>

<div ng-show="showEvents(checkedElements)" id="events">
      ...show something
</div>

如果选中了最后一个复选框（天气），则应显示ID为“events”的DIV。这实际上已经工作正常，我只是有一个问题，如果我加载页面和天气已经从存储真实，“DIV”事件容器不会显示。因此，在加载页面时我需要检查一下是否正常工作并且不会妨碍ng-show

我的控制器是：

exampleApp.controller('MirrorCheckboxController', ['$scope', function($scope) {

    $scope.checkedElements = {};

    $scope.settings = [{
        name: 'Weather',
        value: '',
        id: 'mirror-1'
    }, {
        name: 'Date and Clock',
        value: '',
        id: 'mirror-2'
    }, {
        name: 'Traffic Situation',
        value: '',
        id: 'mirror-3'
    }, {
        name: 'Personal Calendar',
        value: '',
        id: 'mirror-4'
    }];

    // the method to display or hide the event container
    $scope.showEvents = function(obj) {
        return (obj['mirror-4']);
    };
}]);

存储也可以正常工作，并且复选框也会被检查。是否有可能在ng-show的同时使用其他东西只是为了在加载页面时捕获这种情况？我已经挣扎了一段时间并尝试了一些JQuery解决方案，但没有任何效果。

编辑：

<script type="text/javascript">
    // wait until bus service is available
    window.name = 'NG_DEFER_BOOTSTRAP!';
    window["Client"] = {
        SID: "{{SID}}",
        throwErrorOnBootFailure: true,
        readyCallback: function () {
            (function() {
                $(document).ready(function() {
                    angular.resumeBootstrap([]);
                });
            })();
            //load current checkbox states from the storage API while loading
            loadMirror_WeatherEnabler();
        }
    };
</script>

  <!-- Model API dependencies -->
  <script type="text/javascript" src="/hcc/jquery-2.1.0.min.js"></script>
  <script type="text/javascript" src="/bus/ModelAPICommunicationObject.js"></script>
  <script type="text/javascript" src="/bus/ModelAPI.js"></script>
  <script type="text/javascript" src="/bus/ModelAPIWebsocketClientFactory.js"></script>
  <script type="text/javascript" src="/bus/bus-client-bootstrap.js"></script>

加载页面时角度ng显示不正确

0 个答案: