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

  });

Answer 2

我无法理解您想要实现的目标

我的理解是您在一个选择栏中选择一个选项，另一个也以相同的价值打开。

解决方案： - 我发现你在选择栏上使用相同的模型： data.singleSelect

 <select name="singleSelect" ng-model="data.singleSelect">

这导致了问题。在 ng-model 中使用不同的名称作为选择栏。它将解决问题。

Angular ng-repeat preventDefault替代方案

2 个答案:

视图

AngularJS应用程序