AngularJs-サファリのチェックボックスの問題

チェックボックスとドロップダウンがあります。チェックボックスをtrueに設定し、ドロップダウンからオプションを選択すると、チェックボックスがオフになります。AngularJs-サファリのチェックボックスの問題

他のブラウザでは、コードは問題なく動作していますが、この奇妙な動作がサファリに表示されます。

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

誰かが問題で私を助けることができますか？

出典

2017-11-30 Ruchi

[OK]を問題は、チェックボックスのid属性であるので、また、それが簡単にチェックされているチェックボックスを追跡しますので、下記をご参照ください、bRelation.checkedとしてng-modelを使用してください、その問題の原因以来idを削除してくださいスニペット。

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="[email protected]" 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>

出典

2017-11-30 12:58:15

@Ruchiはあなたをこの回答に役立ちましたか？または問題は依然として続きますか？ –

ご協力ありがとうございます。それは私のために働いた:) – Ruchi

@ルチあなたは大歓迎です...あなたの問題が完全に解決された場合は、回答を受け入れてください –

AngularJs-サファリのチェックボックスの問題

答えて

関連する問題