在 ng-repeat AngularJS 中使用 ICheck 单选按钮获取选定索引

Question

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

我已经定义了Icheck

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

$scope.schools 是一个数组对象，如何获取 input[name="masdoc-school"] 的选定索引以在控制器中获取 $scope.schools[selected index] 的值.谢谢大家！

Answer 1

问题解决！在 https://github.com/fronteed/icheck/issues/62

使用 (wajatimur) 的 icheck 指令

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

然后在 ng-repeat 中：

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

在 ng-model 中使用 $parent 因为 ngRepeat 会为其子级创建新的作用域（以及原型继承如何影响作用域）所以 ng-change 只会触发一次事件。

在 ng-repeat AngularJS 中使用 ICheck 单选按钮获取选定索引

Get Selected Index Using ICheck Radio Button in ng-repeat AngularJS

jquery

angularjs

icheck