I have a php object that I pass to ng through a function. This object has several properties such as : paragraphe1, paragraphe2, paragraphe3 up to 8.
I try to display it with a ng-repeat loop like :
<div ng-repeat="i in [1,2,3,4,5,6,7,8]">
Paragraphe {{i}} >> {{paragraphe+i}}
</div>
It shows :
Paragraphe 1 >> 1
Paragraphe 2 >> 2
...
Paragraphe 8 >> 8
instead of the content of paragraphe1, ....8
Thanks for your help.
FX
Assuming your paragraph definition is:
$scope.paragraph = {
paragraph1: 'lorem ipsum 1',
paragraph2: 'lorem ipsum 2',
paragraph3: 'lorem ipsum 3',
// ...
}
The template should look like:
<div ng-repeat="i in [1,2,3,4,5,6,7,8]">
Paragraphe {{i}} >> {{paragraph['paragraph' + i]}}
</div>
See js fiddle
Instead of passing the values hard coded you can make use of key, value pairs in the ng-repeat
view:
<div ng-app="myApp" ng-controller="demoCtrl">
<div ng-repeat="(key, value) in paragraph">
{{key}} >> {{value}}
</div>
</div>
JS:
// module
var app = angular.module('myApp', []);
// filter
app.filter('dayFilter', function() {
return function(input) {
var filterFunction = function (item) {
return item.days >= 1 && item.days <= 7;
};
return input.filter(filterFunction);
};
});
//controller
app.controller('demoCtrl', function ($scope) {
$scope.paragraph = {
paragraph1: 'lorem ipsum 1',
paragraph2: 'lorem ipsum 2',
paragraph3: 'lorem ipsum 3'
}
});
Related
I am new to AngularJS. I am trying to work out an example of a SportsStore app from a book I am following.
In this app, there are several categories of products. Categories are also displayed on the left side of the view.
Clicking a "category" is going to filter the products by category and is going to highlight the Category button.
Reading tutorials on net I understand that the "controller as" syntax is being favored over the "$scope" syntax.
How do I pass a filter (categoryFilterFn) to my controller function for filtering the products by category?
app.html
<!DOCTYPE html>
<html ng-app="SportsStoreApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular-resource.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.css" rel="stylesheet" />
<script src='app.js'></script>
<script src='customFilters.js'></script>
<script src='productListControllers.js'></script>
</head>
<body ng-controller="SportsStoreCtrl as controller">
<div class="navbar navbar-inverse">
<a class="navbar-brand" href="#">SPORTS STORE</a>
</div>
<div class="panel panel-default row" ng-controller="ProductListCtrl">
<div class="col-xs-3">
<a ng-click="selectCategory()"
class="btn btn-block btn-default btn-lg">Home</a>
<a ng-repeat="item in controller.data.products | orderBy:'category' | unique_selection:'category'"
ng-click="selectCategory(item)" class=" btn btn-block btn-default btn-lg"
ng-class="getCategoryClass(item)">
{{item}}
</a>
</div>
<div class="col-xs-8">
<div class="well" ng-repeat="item in controller.data.products | filter:categoryFilterFn">
<h3>
<strong>{{item.name}}</strong>
<span class="pull-right label label-primary">
{{item.price | currency}}
</span>
</h3>
<span class="lead">{{item.description}}</span>
</div>
</div>
</div>
</body>
</html>
customFilters.js
angular.module("customFilters", [])
.filter("unique_selection", function(){
return function(data, propertyName) {
if (angular.isArray(data) && angular.isString(propertyName)) {
var results = [];
var keys = {};
for (var i = 0; i < data.length; i++) {
var val = data[i][propertyName];
if (angular.isUndefined(keys[val])) {
keys[val] = true;
results.push(val);
}
}
return results;
} else {
return data;
}
}
});
app.js
var app = angular.module("SportsStoreApp", ['customFilters']);
app.controller("SportsStoreCtrl", function(){
this.data = {
products: [
{ name: "Product #1", description: "A product",
category: "Category #1", price: 100 },
{ name: "Product #2", description: "A product",
category: "Category #1", price: 110 },
{ name: "Product #3", description: "A product",
category: "Category #2", price: 210 },
{ name: "Product #4", description: "A product",
category: "Category #3", price: 202 }
]
};
});
productListControllers.js
angular.module("SportsStoreApp")
.constant('productListActiveClass', "btn-primary")
.controller('ProductListCtrl', function($scope, $filter, productListActiveClass) {
var selectedCategory = null;
$scope.selectCategory = function(newCategory) {
selectedCategory = newCategory;
};
$scope.categoryFilterFn = function(product) {
return selectedCategory == null ||
product.category == selectedCategory;
};
$scope.getCategoryClass = function(category) {
return selectedCategory = category ? productListActiveClass : "";
};
});
In productListControllers.js, how do I not use "$scope" object and use "this" object along with "$filter" argument? Also, how can I use "ProductListCtrl as product_ctrl" in app.html?
If you want to use your custom filter inside a controller, simply inject your custom filter into your controller using the name of your filter and the suffix Filter.
In your instance you need to inject unique_selectionFilter. You can then use it in your controller passing in your data and property name values:
unique_selectionFilter(data, propertyName)
Alternatively you can inject the $filter service and access your filter through it by passing in it's name:
$filter('unique_selection')(data, propertyName)
Is it possible to add a numbers output from ng-repeat ? I have this output from ng-repeat
1
2
1
I want to add that number so it will become 4. this is the code
<p data-ng-repeat="ticketA in cart.sw_tickets" ng-if="ticketA.ProductId == tickets.ProductId && ticketA.PricingTypeId == 1" ng-init="adultTOT = ticketA.total_ticket">
{{adultTOT}}
</p>
I'm really new in Angular and i'm not really sure I can do trick somewhere inside ng-repeat.
hope from anyone help! thanks
angular.module("app", [])
.controller("SampleController", function($scope) {
var ctrl = this;
ctrl.adultTOT = 0;
ctrl.sw_tickets = [{
Id: 1,
total_ticket: 1
}, {
Id: 2,
total_ticket: 2
}, {
Id: 3,
total_ticket: 1
}]
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div data-ng-app="app">
<div data-ng-controller="SampleController as ctrl">
<p data-ng-repeat="ticketA in ctrl.sw_tickets" ng-init="ctrl.adultTOT= ctrl.adultTOT+ticketA.total_ticket">
{{ctrl.adultTOT}}
</p>
</div>
</div>
I am trying to create a filter where I can conditionally select multiple attributes of the same variable. For example
var list = [ {id: 1, state: 'U'}, {id: 2, state: 'P'} ]
<div ng-repeat="item in list| filter:{state:'U'}>
This would result in id 1 only being displayed.
<div ng-repeat="item in list| filter:{state:'P'}>
This would result in id 2 only being displayed.
How can I create a filter to display all id's that have state:'P' OR state:'A'
Neither of the below work:
<div ng-repeat="item in list| filter:{state:'P' || 'A'}>
<div ng-repeat="item in list| filter:({state:'P'} || {state:'A'})>
Hope this below code snippet might help you ! Run it :)
var app = angular.module('app', []);
app.controller('Ctrl', function($scope) {
$scope.list = [{
id: 1,
state: 'U'
}, {
id: 2,
state: 'P'
}, {
id: 3,
state: 'A'
}];
$scope.state = function(item) {
return (item.state == 'P' || item.state == 'A');
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl">
<div ng-repeat="item in list | filter:state">
{{item.id}}
</div>
</div>
Why do have so much confusion. Use ng-if just like your normal if statement like this
var list = [ {id: 1, state: 'U'}, {id: 2, state: 'P'},{id: 1, state: 'A'} ]
<div ng-repeat="item in list">
<div ng-if="item.state == 'A' || item.state== 'P'">
{{item.id}}
</div>
</div>
Implementation is also as below
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.list = [{id: 1,state: 'U'}, {id: 2,state: 'P'}, {id: 3, state: 'A'}];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-repeat="item in list">
<div ng-if="item.state == 'A' || item.state== 'P'">
{{item.id}}
</div>
</div>
</div>
<!-- if (index == 2) <div>{{data.customText}}</div> -->
<div ng-repeat-start="product in products">{{product.headline}}</div>
<div ng-repeat-end>{{product.text}}</div>
Let's assume I'm showing 5 products, and I want to display additional content {{product.customText}} on 3rd position in between. How could I achieve this?
Use $index attribute and ng-show for showing conditional element. For example the following will be shown only for the 3rd element
var myApp = angular.module("myApp", []);
myApp.controller("MyCtrl", ["$scope",
function($scope) {
$scope.products = [{
headline: "headline1",
text: "text 1"
}, {
headline: "headline2",
text: "text 2"
}, {
headline: "headline3",
text: "text 3"
}, {
headline: "headline4",
text: "text 4"
}, {
headline: "headline5",
text: "text 5"
}];
$scope.data = {
customText: "customText"
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<span ng-repeat="product in products">
<div ng-show="$index == 2">{{data.customText}}</div>
<div>{{product.headline}}</div>
<div>{{product.text}}</div>
</span>
</div>
</body>
</html>
You can use $index to do so.
<div ng-repeat-start="product in products">{{product.headline}}</div>
<div ng-if="$index == 2">{{product.customText}}</div>
<div ng-repeat-end>{{product.text}}</div>
I'm new to angularjs and I have a data binding issue.
After each repeated line, I want to show a number of mutually exclusive options. These would be images using a background-image, and when the option is selected I add the css class 'selected' to the span containing the image.
I've simplified it below to show options A, B and C and to make the currently selected one bold. By clicking on A, B or C you change the option.
The inner ng-repeat section is not evaluated again (it seems) when the model changes, but as the "Debugging category" shows, the outer ng-repeat is re-evaluated and the "Debugging category" shows correctly that the category has been changed.
I'm clearly missing something about angularjs; how can I get the inner ng-repeat to re-evaluate to that the correct style is applied to the A, B and C options?
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var testApp = angular.module('testApp', []);
testApp.controller('NamesCtrl', function ($scope) {
$scope.categories = [ 'A', 'B', 'C' ];
$scope.names = [
{ name: 'John', category: 'C' },
{ name: 'Cindy', category: 'A' },
{ name: 'Patrick', category: 'B' }
];
$scope.changeCategory = function(name, category) {
name.category = category;
};
});
</script>
<body ng-app="testApp">
<h1>Names</h1>
<div ng-controller="NamesCtrl">
<ul>
<li ng-repeat="name in names">
<span>{{name.name}}</span>
<span ng-repeat="category in categories" ng-init="selected = (category == name.category)">
<span ng-style="{'true': {'font-weight': 'bold'}, false: {}}[selected]" ng-click="changeCategory(name, category)">{{category}}</span>
</span>
<em>(Debugging category: {{name.category}})</em>
</li>
</ul>
</div>
</body>
ng-init expression is not watched and updated automatically whenever related scope property value changes, you could just solve this by removing ng-init and using the expression directly
<span ng-style="{'true': {'font-weight': 'bold'}}[category == name.category]"
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
var testApp = angular.module('testApp', []);
testApp.controller('NamesCtrl', function ($scope) {
$scope.categories = [ 'A', 'B', 'C' ];
$scope.names = [
{ name: 'John', category: 'C' },
{ name: 'Cindy', category: 'A' },
{ name: 'Patrick', category: 'B' }
];
$scope.changeCategory = function(name, category) {
name.category = category;
};
});
</script>
<body ng-app="testApp">
<h1>Names</h1>
<div ng-controller="NamesCtrl">
<ul>
<li ng-repeat="name in names">
<span>{{name.name}}</span>
<span ng-repeat="category in categories" >
<span ng-style="{'true': {'font-weight': 'bold'}}[category == name.category]" ng-click="changeCategory(name, category)">{{category}}</span>
</span>
<em>(Debugging category: {{name.category}})</em>
</li>
</ul>
</div>
</body>