javascript - Angular ng-repeat preventDefault 替代方案

Question

我正在使用输入类型选项库。 我将其显示在带有复选框的列表中。

问题是每当我点击输入选择选项时我也在选择 复选框。我决定使用 event.preventDefault() 但它会破坏选择选项并且我打开了两个选择框。 所以我不能使用 event.preventDefault()，你知道如何解决这个问题吗？

e.preventDefault();

这是示例，但没有用于选择选项的自定义库。 http://jsfiddle.net/ufbmsabr/

Answer 1

我现在不知道你想要实现什么，但我试着重构你的代码，就像在这个 demo fiddle 中一样.您应该重构您的 DOM 结构。我认为您的问题与错误的 DOM 层次结构有关。我没有必要通过单击父 p 元素来选中/取消选中复选框。所以，无论这对你有用:

查看

<div ng-controller="DemoCtrl">
  <p ng-repeat="role in roles" ng-click="check(role)">
      <input type="checkbox" checklist-model="user.roles" checklist-value="role.id" ng-model="role.check">                 {{role.text}}
      <select name="singleSelect" ng-model="data.singleSelect" ng-click="log()">
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
      </select>
      <select name="singleSelect" ng-model="data.singleSelect" ng-click="log()">
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
      </select>
    </p>
</div>

AngularJS 应用

angular.module("DemoApp", ["checklist-model"])
  .controller('DemoCtrl', function($scope, $timeout) {

    $scope.optionClicked = false;
    $scope.check = function (role) {
      $timeout(function () {
        if (!$scope.optionClicked) {
          role.check = !role.check
        }
      }, 50);
    }

    $scope.log = function () {
      $scope.optionClicked = true;
      $timeout(function () {
        $scope.optionClicked = false;
      }, 100);
    }

    $scope.roles = [{
      check: true,
      id: 1,
      text: 'guest'
    }, {
      id: 2,
      text: 'user'
    }, {
      id: 3,
      text: 'customer'
    }, {
      id: 4,
      text: 'admin'
    }];

  });