I trying to init a filtered value without success. I'll use partial/ng-include so variable's name can't change.
I using angularjs v1.0.2 and I tried also with v1.1.1
<script>
function Ctrl($scope) {
$scope.trains = [ 1, 2];
}
</script>
<div ng-app ng-controller="Ctrl">
<div ng-init="t = (trains | filter:1)">
{{ t }}
{{ trains | filter:1 }}
</div>
<div ng-init="t = (trains | filter:2)">
{{ t }}
{{ trains | filter:2 }}
</div>
</div>
The output
[2] [1]
[2] [2]
Here is this example -> http://jsfiddle.net/9q5D4/4/
Be careful with the ng-init
expression (especially if you are initializing new variables). In your example you are running 2 separate expressions: t = trains
and filter:<X>
.
You should use t = (trains | filter:<X>)
:
<div ng-app ng-controller="Ctrl">
<div ng-init="t = (trains | filter:1)">
{{ t }}
{{ trains | filter:1 }}
</div>
<div ng-init="tt = (trains | filter:2)">
{{ tt }}
{{ trains | filter:2 }}
</div>
</div>
jsFiddle: http://jsfiddle.net/9q5D4/2/
Not sure this is what you want... But you can use directive in order to combine between ng-init and ng-include:
HTML:
<div ng-app="myApp" ng-controller="Ctrl">
<my-directive field-name=1 train=2></my-directive>
<my-directive field-name=2 train=17></my-directive>
</div>
JS:
function Ctrl($scope, $filter) {
$scope.trains = [1, 2];
}
angular.module("myApp", [])
.directive("myDirective", function() {
return {
restrict: "E",
scope: 'isolate',
template: "<div>{{exposeAttribute}} {{anotherOne}}</div>",
controller: Ctrl,
//templateUrl: "mytemplate.html",
link: function(scope, element, attr) {
scope.exposeAttribute = attr.fieldName;
scope.anotherOne = attr.train;
}
};
});
and the output is:
1 2
2 17
Are you trying to iterate through $scope.trains? In that case you should use ng-repeat. I don't believe filters are applicable for ng-init.
<div ng-app ng-controller="Ctrl">
<div ng-repeat="t in trains | filter:1">
{{ t }}
{{ trains | filter:1 }}
</div>
<div ng-repeat="t in trains | filter:2">
{{ t }}
{{ trains | filter:2 }}
</div>
I haven't checked out exactly why or how, but seems like placing a ng-if attribute before the ng-init makes it work.
tested on angular 1.2+;
<div ng-app ng-controller="Ctrl">
<div ng-init="t = (trains | filter:1)">
{{ t }}
{{ trains | filter:1 }}
</div>
<div ng-if="true" ng-init="t = (trains | filter:2)">
{{ t }}
{{ trains | filter:2 }}
</div>
</div>