Question

我将以下代码集成到我的html页面中：

<div ng-controller="MirrorCheckboxController">

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

</div>



<div id="events">

  <input type="checkbox" id="green">
  <label for="green"><span>Sports</span></label> <br/>

  <input type="checkbox" id="red">
  <label for ="red"><span >University</span></label> <br/>

  <input type="checkbox" id="yellow">
  <label for= "yellow"><span>Friends</span></label> <br/>

  <input type="checkbox" id="blue">
  <label for ="blue"><span>Other</span></label> <br/>

</div>

这是我在外部.js文件中的Angular Code：

(function() {
    'use strict';

    var exampleApp = angular.module('exampleApp');


    exampleApp.controller('MirrorCheckboxController', ['$scope', function($scope) {
        $scope.settings = [{
            name: 'Weather Forecast',
            value: '',
            id: 'mirror-1'
        }, {
            name: 'Time',
            value: '',
            id: 'mirror-2'
        }, {
            name: 'Traffic Situation',
            value: '',
            id: 'mirror-3'
        }, {
            name: 'Personal Schedule',
            value: '',
            id: 'mirror-4'
        }];

      }]);

})();

我正在寻找隐藏我的“events”div-container的方法，如果选中Angular-loop中最后一个带有id：'mirror-4'的复选框。我尝试使用JQuery在脚本标记的html文件中解决这个问题。如果代码不是指Angular给出的ID，则代码正在运行。为什么以下代码不起作用？

<script>
    $('#mirror-4').change(function(){
          if($(this).prop("checked")) {
            $('#events').show();
          } else {
            $('#events').hide();
          }
        });
</script>

我对Angular很新，并感谢每一位帮助。

此致洛伦茨

Answer 1

如果你使用angular，你应该采用角度方式，并尽量避免使用jQuery。如上面的评论所述，尝试使用角度逻辑来处理您的请求。这是一个非常基本的角度example：

在您的复选框中添加ng-model ：

<input type="checkbox" ng-model="toggleEvents" ng-attr-id="{{ setting.id }}">
// If you want to display the "events container" 
// per default add a `ng-init` like this:
<input type="checkbox" ng-model="toggleEvents" ng-init="toggleEvents=true" />

使用ng-if来处理隐藏/显示：

<div ng-if="toggleEvents">  
    This is your Eventbox
</div>

或者为了更接近您给定的代码，您可以执行以下操作：

exampleApp.controller('MirrorCheckboxController', ['$scope', function($scope) {
    // we use this to collect the checked checkboxes
    $scope.checkedElements = {};

    // your settings
    $scope.settings = [{
      name: 'Weather Forecast',
      value: '',
      id: 'mirror-1'
    }, {
      name: 'Time',
      value: '',
      id: 'mirror-2'
    }, {
      name: 'Traffic Situation',
      value: '',
      id: 'mirror-3'
    }, {
      name: 'Personal Schedule',
      value: '',
      id: 'mirror-4'
    }];

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

在你的HTML中：

<div ng-controller="MirrorCheckboxController">
   <p ng-repeat="setting in settings">
       <label class="checkbox">
           <input type="checkbox" 
             ng-id="{{setting.id}}" 
             ng-model="checkedElements[setting.id]" />
           {{setting.name}}
       </label>
   </p>
   <div ng-show="showEvents(checkedElements)">
    <!-- your event container -->
    This is shown per default, hide if checkox with id "mirror-4" is checked
   </div>
</div>

这是is here的小提琴。

在JQuery中从Angular调用ng-attr-id

1 个答案: