Skip to content

Instantly share code, notes, and snippets.

@matthewbednarski

matthewbednarski/index.html

Created March 2, 2015 14:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save matthewbednarski/41782a3ccc6f32453bbb to your computer and use it in GitHub Desktop.
Save matthewbednarski/41782a3ccc6f32453bbb to your computer and use it in GitHub Desktop.
Download ZIP
Angular 1.3 Filtering Angular 1.3 controller with directives applying filters to underlying data // source http://jsbin.com/kadeba
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Angular 1.3 controller with directives applying filters to underlying data">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
<meta charset="utf-8">
<title>Angular 1.3 Filtering</title>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<button ng-click="onAdd()">Add</button>
<div>
<p>Filtered:</p>
<my-directive-fail data="{{ tab | filter:fil | filter:fi2 }}" />
</div>
<div>
<p>Full:</p>
<my-directive data=" tab " />
</div>
</div>
<script id="jsbin-javascript">
console.clear();
var myApp = angular.module('myApp', []);
myApp
.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
data: '='
},
template: '<ul><li ng-repeat="item in data">{{item.title}}</li></ul>'
};
})
.directive('myDirectiveFail', function($filter) {
return {
restrict: 'E',
scope: {
data: '@'
},
link: function($scope, ele, attrs) {
$scope.items = $scope.$eval($scope.data);
$scope.$watch(function() {
return $scope.data;
}, function() {
$scope.items = $scope.$eval($scope.data);
});
},
template: '<ul><li ng-repeat="item in items">{{item.title}}</li></ul>'
};
})
.controller('myCtrl', ['$scope',
function($scope) {
$scope.num = 52;
$scope.onAdd = function() {
var tmp = {
"title": 'Note Now ' + $scope.num
};
$scope.tab.push(tmp);
$scope.num++;
};
$scope.tab = [{
title: 'Note 1'
}, {
title: 'Note 2'
}, {
title: 'Note 3'
}, {
title: 'Note 33'
}, {
title: 'Note 35'
}, {
title: 'Note 5'
}];
$scope.fil = function(item) {
var idx = item.title.indexOf('3');
return idx > -1;
};
$scope.fi2 = function(item) {
var idx = item.title.indexOf('3');
var idx1 = item.title.indexOf('5');
return idx > -1 && idx1 > -1;
};
}
]);
</script>
<script id="jsbin-source-javascript" type="text/javascript">console.clear();
var myApp = angular.module('myApp', []);
myApp
.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
data: '='
},
template: '<ul><li ng-repeat="item in data">{{item.title}}</li></ul>'
};
})
.directive('myDirectiveFail', function($filter) {
return {
restrict: 'E',
scope: {
data: '@'
},
link: function($scope, ele, attrs) {
$scope.items = $scope.$eval($scope.data);
$scope.$watch(function() {
return $scope.data;
}, function() {
$scope.items = $scope.$eval($scope.data);
});
},
template: '<ul><li ng-repeat="item in items">{{item.title}}</li></ul>'
};
})
.controller('myCtrl', ['$scope',
function($scope) {
$scope.num = 52;
$scope.onAdd = function() {
var tmp = {
"title": 'Note Now ' + $scope.num
};
$scope.tab.push(tmp);
$scope.num++;
};
$scope.tab = [{
title: 'Note 1'
}, {
title: 'Note 2'
}, {
title: 'Note 3'
}, {
title: 'Note 33'
}, {
title: 'Note 35'
}, {
title: 'Note 5'
}];
$scope.fil = function(item) {
var idx = item.title.indexOf('3');
return idx > -1;
};
$scope.fi2 = function(item) {
var idx = item.title.indexOf('3');
var idx1 = item.title.indexOf('5');
return idx > -1 && idx1 > -1;
};
}
]);</script></body>
</html>
Raw
jsbin.kadeba.js
console.clear();
var myApp = angular.module('myApp', []);
myApp
.directive('myDirective', function() {
return {
restrict: 'E',
scope: {
data: '='
},
template: '<ul><li ng-repeat="item in data">{{item.title}}</li></ul>'
};
})
.directive('myDirectiveFail', function($filter) {
return {
restrict: 'E',
scope: {
data: '@'
},
link: function($scope, ele, attrs) {
$scope.items = $scope.$eval($scope.data);
$scope.$watch(function() {
return $scope.data;
}, function() {
$scope.items = $scope.$eval($scope.data);
});
},
template: '<ul><li ng-repeat="item in items">{{item.title}}</li></ul>'
};
})
.controller('myCtrl', ['$scope',
function($scope) {
$scope.num = 52;
$scope.onAdd = function() {
var tmp = {
"title": 'Note Now ' + $scope.num
};
$scope.tab.push(tmp);
$scope.num++;
};
$scope.tab = [{
title: 'Note 1'
}, {
title: 'Note 2'
}, {
title: 'Note 3'
}, {
title: 'Note 33'
}, {
title: 'Note 35'
}, {
title: 'Note 5'
}];
$scope.fil = function(item) {
var idx = item.title.indexOf('3');
return idx > -1;
};
$scope.fi2 = function(item) {
var idx = item.title.indexOf('3');
var idx1 = item.title.indexOf('5');
return idx > -1 && idx1 > -1;
};
}
]);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment