Question

我有一个复选框和下拉列表。当我将复选框设置为true并从下拉列表中选择一个选项时，复选框将自行清除。

在其他浏览器中，代码运行正常但在safari中显示这种奇怪的行为。

    Below is my html and js:

    <div class="form-group">
               <div class="col-md-12">
                    <div class="col-md-3">
                      <span ng-repeat="bRelation in Relations|limitTo: 3">
                      <label class="checkbox" for="{{bRelation.Id}}">
                          <input type="checkbox" class="b-relation" ng-model="group" value="{{bRelation.Id}}" ng-change="checkRelation(bRelation.Id)" name="group" id="{{bRelation.Id}}" />
                          {{bRelation.Text}}
                          <select class="form-control brelationnum" name="brelationnum" style="display:inline;">
                            <option value="">-- Relatives Count --</option>
                            <option value="1">1</option>
                            <option value="2">2</option>
                            <option value="3">3</option>
                            <option value="4">4</option>
                          </select>
                      </label>
                      </span>
                    </div>
                </div>
          </div>

$scope.Relations = [
    {'Id' : '1', 'Text' : 'Grandmother' },
    {'Id' : '2', 'Text' : 'Mother' },
    {'Id' : '3', 'Text' : 'Sister' }
];

我在这里创建了一个Pluker：Checkbox issue in safari

有人可以帮我解决这个问题吗？

Answer 1

好的问题是因为复选框的id属性，请删除导致问题的id，同时请使用ng-model作为bRelation.checked ，因为它可以轻松跟踪选中的复选框，请参阅以下代码段。

＆＃13;

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {

    $scope.details = [
   { "name": "Employees" },
   { "name": "Support" }
    ];
     $scope.details.name = [
   { "prof": "enginerr" },
   { "prof": "doctor" }
    ];
    $scope.Relations = [
    {'Id' : '1', 'Text' : 'Grandmother' },
    {'Id' : '2', 'Text' : 'Mother' },
    {'Id' : '3', 'Text' : 'Sister' }
];
});

＆＃13;

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
      <div class="form-group">
           <div class="col-md-12">
                <div class="col-md-3">
                  <span ng-repeat="bRelation in Relations|limitTo: 3">
                  <label class="checkbox" for="{{bRelation.Id}}">
                      <input type="checkbox" class="b-relation" ng-model="bRelation.checked" name="group"/>
                      {{bRelation.Text}}
                      <select class="form-control brelationnum" name="brelationnum" style="display:inline;">
                        <option value="">-- Relatives Count --</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                      </select>
                  </label>
                  </span>
                </div>
                <pre>{{Relations}}</pre>
            </div>
      </div>
  </body>

</html>

＆＃13;

Safari中的AngularJs- Checkbox问题

1 个答案: