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

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文件中的角码：

(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'
        }];

      }]);

})();

我正在寻找一种方法，以隐藏我的“事件”div容器，如果在角循环中的最后一个复选框与id：‘镜-4’被选中。我试图用JQuery在脚本标签中的html文件中解决这个问题。如果代码没有引用由角给出的ID，那么代码是可以工作的。为什么下面的代码不起作用？

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

我对棱角很陌生，对每一次帮助都心存感激。

你好，洛伦兹

Answer 1

如果你使用角度，你应该这样做，并尽量避免jQuery。正如上面的注释中所提到的，尝试使用角度逻辑来处理您的请求。这是一个非常基本的角度示例

将添加到复选框中

<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>

还有这个就在这里的小提琴。