2016-11-15 4 views
1
<tr ng-repeat="school in schools"> 
<td>{{school.Location}}</td> 
<td>{{school.Type}}</td> 
<td>{{school.Name}}</td> 
<td class="school-action text-center"> 
    <label>        
      <input type="radio" name="masdoc-school" class="flat-red" /> 
    </label> 
</td> 
</tr> 

私はすでに$ scope.schoolsが、私は入力のインデックスを選択し得ることができますどのように、配列オブジェクトである NGリピートAngularJSでICheckラジオボタンを使用して、選択したインデックスを取得します

$('input[type="radio"].flat-red').iCheck({ 
    checkboxClass: 'icheckbox_square-blue', 
    radioClass: 'iradio_square-blue' 
}); 

Icheck

定義されている[名= "masdoc-school"]を実行してコントローラの$ scope.schools [selected index]の値を取得します。皆さんありがとう!

答えて

1

問題解決! NG-繰り返しで、その後https://github.com/fronteed/icheck/issues/62

app.directive('icheck', function($timeout, $parse) { 
    return { 
     require: 'ngModel', 
     link: function($scope, element, $attrs, ngModel) { 
      return $timeout(function() { 
       var value; 
       value = $attrs['value']; 

       $scope.$watch($attrs['ngModel'], function(newValue) { 
        $(element).iCheck('update'); 
       }) 

       return $(element).iCheck({ 
        checkboxClass: 'icheckbox_square-blue', 
        radioClass: 'iradio_square-blue' 

       }).on('ifChanged', function(event) { 
        if ($(element).attr('type') === 'checkbox' && $attrs['ngModel']) { 
         $scope.$apply(function() { 
          return ngModel.$setViewValue(event.target.checked); 
         }); 
        } 
        if ($(element).attr('type') === 'radio' && $attrs['ngModel']) { 
         return $scope.$apply(function() { 
          return ngModel.$setViewValue(value); 
         }); 
        } 
       }); 
      }); 
     } 
    }; 
}); 

で(wajatimur)のicheckディレクティブを使用:ngRepeatが(その子のために新しいスコープを作成しますので、NG-モデルで$親を使用して

<tbody> 
    <tr ng-repeat="school in schools"> 
     <td>{{school.Location}}</td> 
     <td>{{school.Type}}</td> 
     <td>{{school.Name}}</td> 
     <td class="school-action text-center"> 
      <label> 
       <input icheck type="radio" name="iCheck" class="flat-red" ng-value={{$index}} ng-model="$parent.schoolIndex" ng-change="changeFaculty(schoolIndex)"/> 
      </label> 
     </td> 
    </tr> 

プロトタイプの継承がスコープにどのように影響を与えるか)、そのため、変更はイベントを1回だけ発生させます。

関連する問題