Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://code.angularjs.org/1.2.1/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.1.10/echarts.common.min.js"></script>
<div class="container" ng-controller="MyCtrl">
<form class="form-horizontal" role="form">
<div ng-repeat="Item in TitlesItems" class="form-group row">
<label for="{{Item[0]}}" class="col-sm-9 control-label">{{Item[1]}}</label>
<div class="col-sm-1">
<input class="form-control" type="radio" name="{{Item[1]}}" ng-model="Item[2]" value="1" i-check> </input>
</div>
<div class="col-sm-1">
<input class="form-control" type="radio" name="{{Item[1]}}" ng-model="Item[2]" value="2" i-check> </input>
</div>
<div class="col-sm-1">
<input class="form-control" type="radio" name="{{Item[1]}}" ng-model="Item[2]" value="3" i-check> </input>
</div>
</div>
</form>
</div>
<div >
JavaScript
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.TitlesItems = [[0,'設備啟動正常',1],[1,'控制啟動正常',2],[2,'控制程序驗證正常',3],[3,'馬達三相電壓正常',1],[4,'馬達三相電流正常',2]];
}
myApp.directive('iCheck', ['$timeout', '$parse', function ($timeout, $parse) {
return {
require: 'ngModel',
link: function($scope, element, $attrs, ngModel) {
ngModel.$parsers.push(function (value) {
if($attrs['value']==1) return 1;
if($attrs['value']==2) return 2;
if($attrs['value']==3) return 3;
});
ngModel.$formatters.push(function (value) {
if($attrs['value']==1 && value==1 ) return true;
if($attrs['value']==2 && value==2 ) return true;
if($attrs['value']==3 && value==3 ) return true;
return false;
});
return $timeout(function() {
var value;
value = $attrs['value'];
$scope.$watch($attrs['ngModel'], function(newValue){
$(element).iCheck('update');
})
return $(element).iCheck({
checkboxClass: 'icheckbox_flat-red',
radioClass: 'icheckbox_flat-red'
}).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);
});
}
});
});
}
};
}]);