Skip to content

Instantly share code, notes, and snippets.

@pofigizm

pofigizm/index.html

Created January 18, 2015 15:38
Show Gist options
  • Save pofigizm/f0dbbcc7cf9dbc4b92f0 to your computer and use it in GitHub Desktop.
Save pofigizm/f0dbbcc7cf9dbc4b92f0 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
.itemslist {
display:inline-block;
background: white;
border: 1px solid #ccc;
}
.itemslist table{
display: inline-block;
margin: 20px 0px 20px 20px;
vertical-align: top;
}
.itemslist table:last-child{
margin-right: 30px;
}
.itemslist table td {
padding: 0 3px;
}
.itemslist table input {
width: 40px;
}
.itemslist table a {
display: block;
width: 20px;
height: 20px;
background-image: url("https://cdn.tutsplus.com/net/uploads/2013/08/twittericons.jpg");
background-position: -470px -40px;
}
</style>
</head>
<body>
<body ng-app="app">
<div items-drct="items" ng-controller="itemCtrl"></div>
</body>
<script id="jsbin-javascript">
angular.module('app', [])
.controller('itemCtrl', function ($scope) {
$scope.items = [
{audio: '', text: 'чей', value: '3'},
{audio: '', text: 'третий', value: '2'},
{audio: '', text: 'сентябрь', value: '1'},
{audio: '', text: 'лекция', value: '3'},
{audio: '', text: 'троллейбус', value: '2'},
{audio: '', text: 'телефон', value: '1'},
{audio: '', text: 'маленькие', value: '3'},
{audio: '', text: 'неправильно', value: '2'},
{audio: '', text: 'по-английски', value: '1'},
{audio: '', text: 'общежитие', value: '3'},
{audio: '', text: 'лаборатория', value: '1'}
];
$scope.show = {
audio: true,
text: true,
input: true,
column: 2
};
})
.directive('itemsDrct', function () {
return {
restrict: 'A',
template: '<div class="itemslist">' +
'<table ng-repeat="c in cols">' +
'<tr ng-repeat="item in items | filter:{col:c}">' +
'<td ng-show="show.audio"><a href="{{item.audio}}"></a></td>' +
'<td ng-show="show.text">{{item.text}}</td>' +
'<td ng-show="show.input"><input value="{{item.value}}"></td>' +
'</tr></table>' +
'</div>',
link:function($scope, element, attrs){
$scope.cols = '12345'.slice(0, $scope.show.column)
.split('').map(Number);
$scope.items.forEach ( function(e, i) {
e.col = Math.ceil(i / $scope.items.length * $scope.show.column + 0.01);
});
}
};
}
);
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"><\/script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<body ng-app="app">
<div items-drct="items" ng-controller="itemCtrl"></div>
</body>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.itemslist {
display:inline-block;
background: white;
border: 1px solid #ccc;
}
.itemslist table{
display: inline-block;
margin: 20px 0px 20px 20px;
vertical-align: top;
}
.itemslist table:last-child{
margin-right: 30px;
}
.itemslist table td {
padding: 0 3px;
}
.itemslist table input {
width: 40px;
}
.itemslist table a {
display: block;
width: 20px;
height: 20px;
background-image: url("https://cdn.tutsplus.com/net/uploads/2013/08/twittericons.jpg");
background-position: -470px -40px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">angular.module('app', [])
.controller('itemCtrl', function ($scope) {
$scope.items = [
{audio: '', text: 'чей', value: '3'},
{audio: '', text: 'третий', value: '2'},
{audio: '', text: 'сентябрь', value: '1'},
{audio: '', text: 'лекция', value: '3'},
{audio: '', text: 'троллейбус', value: '2'},
{audio: '', text: 'телефон', value: '1'},
{audio: '', text: 'маленькие', value: '3'},
{audio: '', text: 'неправильно', value: '2'},
{audio: '', text: 'по-английски', value: '1'},
{audio: '', text: 'общежитие', value: '3'},
{audio: '', text: 'лаборатория', value: '1'}
];
$scope.show = {
audio: true,
text: true,
input: true,
column: 2
};
})
.directive('itemsDrct', function () {
return {
restrict: 'A',
template: '<div class="itemslist">' +
'<table ng-repeat="c in cols">' +
'<tr ng-repeat="item in items | filter:{col:c}">' +
'<td ng-show="show.audio"><a href="{{item.audio}}"></a></td>' +
'<td ng-show="show.text">{{item.text}}</td>' +
'<td ng-show="show.input"><input value="{{item.value}}"></td>' +
'</tr></table>' +
'</div>',
link:function($scope, element, attrs){
$scope.cols = '12345'.slice(0, $scope.show.column)
.split('').map(Number);
$scope.items.forEach ( function(e, i) {
e.col = Math.ceil(i / $scope.items.length * $scope.show.column + 0.01);
});
}
};
}
);</script></body>
</html>
Raw
jsbin.huvuhemava.css
.itemslist {
display:inline-block;
background: white;
border: 1px solid #ccc;
}
.itemslist table{
display: inline-block;
margin: 20px 0px 20px 20px;
vertical-align: top;
}
.itemslist table:last-child{
margin-right: 30px;
}
.itemslist table td {
padding: 0 3px;
}
.itemslist table input {
width: 40px;
}
.itemslist table a {
display: block;
width: 20px;
height: 20px;
background-image: url("https://cdn.tutsplus.com/net/uploads/2013/08/twittericons.jpg");
background-position: -470px -40px;
}
Raw
jsbin.huvuhemava.js
angular.module('app', [])
.controller('itemCtrl', function ($scope) {
$scope.items = [
{audio: '', text: 'чей', value: '3'},
{audio: '', text: 'третий', value: '2'},
{audio: '', text: 'сентябрь', value: '1'},
{audio: '', text: 'лекция', value: '3'},
{audio: '', text: 'троллейбус', value: '2'},
{audio: '', text: 'телефон', value: '1'},
{audio: '', text: 'маленькие', value: '3'},
{audio: '', text: 'неправильно', value: '2'},
{audio: '', text: 'по-английски', value: '1'},
{audio: '', text: 'общежитие', value: '3'},
{audio: '', text: 'лаборатория', value: '1'}
];
$scope.show = {
audio: true,
text: true,
input: true,
column: 2
};
})
.directive('itemsDrct', function () {
return {
restrict: 'A',
template: '<div class="itemslist">' +
'<table ng-repeat="c in cols">' +
'<tr ng-repeat="item in items | filter:{col:c}">' +
'<td ng-show="show.audio"><a href="{{item.audio}}"></a></td>' +
'<td ng-show="show.text">{{item.text}}</td>' +
'<td ng-show="show.input"><input value="{{item.value}}"></td>' +
'</tr></table>' +
'</div>',
link:function($scope, element, attrs){
$scope.cols = '12345'.slice(0, $scope.show.column)
.split('').map(Number);
$scope.items.forEach ( function(e, i) {
e.col = Math.ceil(i / $scope.items.length * $scope.show.column + 0.01);
});
}
};
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment