AngularJs- Safari 中的复选框问题答案

【问题标题】：AngularJs- Checkbox issue in safariAngularJs- Safari 中的复选框问题
【发布时间】：2017-11-30 20:58:15
【问题描述】：

我有一个复选框和下拉菜单。当我将复选框设置为 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

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

【问题讨论】：

标签： angularjs checkbox safari

【解决方案1】：

好的，所以问题是由于复选框的id属性，请删除id，因为它会导致问题，也请使用ng-model作为bRelation.checked，因为它可以轻松跟踪哪个复选框已检查，请参考下面的sn-p。

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

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

【讨论】：

@Ruchi 这个答案对你有帮助吗？还是问题仍然存在？
@Ruchi 不客气...如果您的问题完全解决，请接受回答
请见谅