I would like to use tabs to hide and show items in an ng-repeat. Is it possible to change the value of a scope like so?
<a ng-click="packageType = '1'">Package 1</a><a ng-click="packageType ='2'">Package 2</a><a ng-click="packageType = '3'">Package 3</a>
<div ng-repeat="item in packages" ng-show="packageType >=item.packageID">
{{item.name}}</div>
and the scope:
$scope.packages = [...{ "name": "some name",
"packageID": 1}...]
Where packageID can be 1, 2 or 3?
Here's the code that does exactly what your asking
Plunker
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet">
</head>
<body ng-controller="MainCtrl">
<div ng-controller="TabCtrl">
<tabset>
<tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active" select="onTabSelected(tab.slug)">
{{ tab.packageId }}
</tab>
</tabset>
</div>
<script type="text/javascript" charset="utf-8">
angular.module('app', ['ui.bootstrap']).config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
$routeProvider.when('/', {
controller: 'MainCtrl'
}).when('/room/:id', {
controller: 'RoomCtrl',
}).when('/dashboard', {
controller: 'DashboardCtrl'
}).otherwise({
redirectTo: '/'
});
$locationProvider.html5Mode(false);
}]);
var TabCtrl = function($scope) {
$scope.tabs = [{
slug: 'dashboard',
name: "Package 1",
packageId: "some package #1"
}, {
slug: 'room-1',
name: "Package 2",
packageId: "some package #2"
}, {
slug: 'room-2',
name: "Package 3",
packageId: "some package #3"
}];
};
RoomCtrl = function($scope, $location) {
};
DashboardCtrl = function($scope, $location) {
};
MainCtrl = function($scope, $location) {
$scope.onTabSelected = function(tab) {
var route;
if (typeof tab === 'string') {
switch (tab) {
case 'dashboard':
route = tab;
break;
default:
route = 'rooms/' + tab;
break;
}
}
$location.path('/' + route);
};
};
</script>
</body>
</html>
I would write a function that encapsulates what you want to happen on click. That would make it easier to understand.
So I assume packages is an array and what you posted is not your complete code.
You will want to change your ng-show to say
ng-show="packageType == item.packageID"
this will only show the div if the packageID is the same as the package type. Your ng-click should work fine. You will want to set a default value for packageType somewhere in your controller however so something shows initially
You code has a few problems:
You first ng-click is does not have a closing quote.
<a ng-click="packageType = '1'>Package 1</a>
You set packageType to a string when it is a number later:
packageType ='2'
$scope.packages = { "name": "some name",
"packageID": 1}
You don't need {{}} in the ng-show
ng-show="packageType >={{item.packageID}}"
I think you meant for packages to be an array instead of an object:
$scope.packages = { "name": "some name",
"packageID": 1}
Example of how to do it is below. I set it to show on the second and third links :
(function() {
'use strict';
angular
.module('exampleApp', [])
.controller('ExampleController', ExampleController);
function ExampleController($scope) {
var vm = this;
$scope.packageType = 1;
$scope.packages = [{
"name": "some name1",
"packageID": 2
}, {
"name": "some name2",
"packageID": 2
}, {
"name": "some name3",
"packageID": 2
}, {
"name": "some name4",
"packageID": 3
}, {
"name": "some name5",
"packageID": 3
}, {
"name": "some nam6",
"packageID": 3
}];
}
ExampleController.$inject = ['$scope'];
})();
<!DOCTYPE html>
<html ng-app='exampleApp'>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
</head>
<body ng-controller="ExampleController">
<a ng-click="packageType = 1">Package 1</a>
<a ng-click="packageType = 2">Package 2</a>
<a ng-click="packageType = 3">Package 3</a>
<p ng-repeat="item in packages" ng-show="packageType >= item.packageID">{{item.name}}
</p>
</body>
</html>
Related
Below I have some AngularJS code to parse some JSON which lists all categories. I would like to display each product associated with a category when you click the category button, so when you click a category button, it should display a list of all the products within that category below. Here's what I have so far:
(function() {
var app = angular.module('store', []);
app.controller('StoreController', ['$scope', function($scope) {
var vm = this;
$scope.products = [{
"category": "Cat1",
"name": "Product1"
}, {
"category": "Cat1",
"name": "Product2"
}, {
"category": "Cat2",
"name": "Product3"
}, {
"category": "Cat3",
"name": "Product4"
}]
$scope.categories = Object.keys($scope.products.reduce(function(categoryMap, product) {
categoryMap[product.category] = 1;
return categoryMap;
}, {}));
vm.selectCategory = function(category) {
vm.selectedCategory = category;
}
}]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="category in categories" class="category">
<button ng-click="vm.selectCategory(category);">{{category}}</button>
</div>
<!-- RESULTS -->
<div ng-repeat="product in vm.selectedCategory" class="product">
<p>{{product.name}}</p>
</div>
</body>
</html>
Since you are using controller as syntax, it is better to avoid all the $scope from your code. I am pushing all the products corresponding to selected category into a new array vm.selectedCategoryProjects.
(function() {
var app = angular.module('store', []);
app.controller('StoreController', ['$scope', function($scope) {
var vm = this;
vm.products = [{
"category": "Cat1",
"name": "Product1"
}, {
"category": "Cat1",
"name": "Product2"
}, {
"category": "Cat2",
"name": "Product3"
}, {
"category": "Cat3",
"name": "Product4"
}]
vm.categories = Object.keys(vm.products.reduce(function(categoryMap, product) {
categoryMap[product.category] = 1;
return categoryMap;
}, {}));
vm.selectCategory = function(category) {
vm.selectedCategoryProjects =[];
angular.forEach(vm.products,function(value,key){
if(value.category==category)
vm.selectedCategoryProjects.push(value.name);
});
}
}]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="category in vm.categories" class="category">
<button ng-click="vm.selectCategory(category);">{{category}}</button>
</div>
<!-- RESULTS -->
<div ng-repeat="product in vm.selectedCategoryProjects" class="product">
<p>{{product}}</p>
</div>
</body>
</html>
For this issue you can use filter. so after selected a category filter product based on.
(function() {
var app = angular.module('store', []);
app.controller('StoreController', ['$scope', function($scope) {
var vm = this;
$scope.products = [{
"category": "Cat1",
"name": "Product1"
}, {
"category": "Cat1",
"name": "Product2"
}, {
"category": "Cat2",
"name": "Product3"
}, {
"category": "Cat3",
"name": "Product4"
}]
$scope.categories = Object.keys($scope.products.reduce(function(categoryMap, product) {
categoryMap[product.category] = 1;
return categoryMap;
}, {}));
vm.selectCategory = function(category) {
vm.selectedCategory = category;
}
}]);
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html lang="en" ng-app="store">
<body ng-controller="StoreController as vm">
<div ng-repeat="product in products" class="category">
<button ng-click="vm.selectCategory(product.category);">{{product.category}}</button>
</div>
<!-- RESULTS -->
<div ng-if="vm.selectedCategory" ng-repeat="product in products | filter:{category:vm.selectedCategory}" class="product">
<p>{{product.name}}</p>
</div>
</body>
</html>
just do this:
<!-- RESULTS -->
<div ng-repeat="product in products" class="product" ng-if="vm.selectedCategory && vm.selectedCategory === product.category">
<p>{{product.name}}</p>
</div>
I'm new in angularjs, I'm trying to load data from my JSON file on view. JSON file have some list of lists using li. But does not get showed on my view.
Here is my 'index.html' file
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li ng-repeat="item in navbaritem.navigation">
<a class="{{ item.class }}" href="#" ng-href="{{ item.url }}">{{ item.title }}</a>
</li>
</ul>
</div>
Here is my controller.js
(function(){
var app = angular.module('myapp', []);
app.controller('mycntrl', function($scope, $http) {
$scope.navbaritem = [];
$http.get('pages/navbar.json').success(function(data) {
$scope.navbaritem = data;
}, function (err,data) {
if(err){
return console.log(err);
}
console.log(data);
});
});
});
Here is my 'pages/navbar.json' file
{
"general":{
"logo":"images/logo.jpeg",
"name" : "Company Name"
},
"navigation":[
{
"title":"Home",
"link":"#"
},
{
"title":"About",
"link":"#"
},
{
"title":"Services",
"link":"#"
},
{
"title":"Contact",
"link":"#"
}
]
}
and my output is like this {{item.title}} and also I'm getting the error
Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.6.1/$injector/modulerr?p0=myapp&p1=Error%3A%2…localhost%2Fangular-theme%2Fassets%2Fangularjs%2Fangular.min.js%3A21%3A332)
Here is a working example :
Note: As SO snippet editor does not allow additional files, I simulated a $http call in my service with $timeout which also return a promise.
Snippet
(function() {
'use strict';
angular.module('app', []);
angular.
module('app')
.controller('ExampleController', ['$scope', 'MyService', function($scope, MyService) {
// Call service to get navbar items
MyService.getNavbarItems()
.then(function(data) {
// Once promise success, update $scope
$scope.navbaritem = data;
});
}])
.factory('MyService', ['$timeout', function($timeout) {
return {
getNavbarItems: function() {
// Simulate 250ms $http api call
// Use return $http.get('/api/navbar/items') in your code
return $timeout(function() {
return {
"general": {
"logo": "images/logo.jpeg",
"name": "Company Name"
},
"navigation": [{
"title": "Home",
"link": "/home",
"class": "item"
},
{
"title": "About",
"link": "/about"
},
{
"title": "Services",
"link": "/services"
},
{
"title": "Contact",
"link": "/contact"
}
]
}
}, 250);
}
}
}])
})();
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script>
</head>
<body ng-controller="ExampleController">
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li ng-repeat="item in navbaritem.navigation">
<a class="{{ item.class }}" href="#" ng-href="{{ item.link }}">{{ item.title }}</a>
</li>
</ul>
</div>
</body>
</html>
while i am calling {{jeans.title}} in product page its not working.
my app.js code:-
<!-- Modules -->
var app = angular.module('GalleryApp', ['ngRoute']);
<!-- routeProvider -->
app.config(function ($routeProvider) {
$routeProvider
.when('/', {
controller: 'HomeController',
templateUrl: 'views/home.html'
})
.when('/products/:id', {
controller: 'ProductsController',
templateUrl:'views/product.html'
})
.otherwise({ redirectTo: '/' });
});
<!-- Controllers -->
app.controller('HomeController', ['$scope', 'products', function($scope, products) {
products.success(function(data1) {
$scope.products = data1;
});
}]);
app.controller('ProductsController', ['$scope', 'products', '$routeParams', function($scope, products, $routeParams) {
products.success(function(data2) {
jeans = data2[$routeParams.id];
});
}]);
<!-- services -->
app.factory('products', ['$http', function($http) {
return $http.get('products.json')
.success(function(data) {
return data;
});
}]);
index.html:-
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,300" rel="stylesheet" type="text/css">
<link href="css/main.css" rel="stylesheet" />
<!-- Include the core AngularJS library -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<!-- Include the AngularJS routing library -->
<script src="https://code.angularjs.org/1.2.28/angular-route.min.js"></script>
</head>
<body ng-app="GalleryApp">
<div ng-view></div>
<script src="js/app.js"></script>
</body>
</html>
home.html:-
<div class="container">
<div class="row" ng-repeat="men in products.mens">
<div class="col-sm-4" ng-repeat="jean in men.jeans">
<p>{{ jean.title }}</p>
<img ng-src="{{ jean.img }}" alt="{{ jean.brand }}" title="{{ jean.brand }}"/>
<h3>{{ jean.brand }}</h3>
<h4>{{ jean.model }}</h4>
</div>
</div>
</div>
product.html:-
<div class="container">
<div class="row">
<div class="col-sm-6">
<p>{{ jeans.title }}</p>
</div>
</div>
</div>
Product.json:-
{
"mens": [
{
"name": "mens fasion",
"jeans": [
{
"title": "Slim fit",
"model": "slim 2527",
"brand": "Tommy Hilfiger",
"img": "images/mens/jeans/product_1.jpg",
"price": "2000",
"offer": "10"
},
{
"title": "Parallel",
"model": "Parallel-1575",
"brand": "Denim",
"img": "images/mens/jeans/product_2.jpg",
"price": "2500",
"offer": "15"
},
{
"title": "cargos",
"model": "cargos 2876",
"brand": "Lee Cooper",
"img": "images/mens/jeans/product_3.jpg",
"price": "3000",
"offer": "20"
}
]
}
]
}
while i am calling {{jeans.title}} in product page its not working.
In ProductsController
jeans = data2[$routeParams.id];
you are missing $scope.. It should be:
$scope.jeans = data2[$routeParams.id];
Also, it seems that you want to access the sub-object mens[0].jeans within your JSON object here:
$scope.jeans = data2.mens[0].jeans[$routeParams.id];
facing problems with my directive that I've created. The directive seems to be executing, I know this as console.log() was called and some of the template was shown too however the part which didn't show up was the one with angular expression. Here's a sample:
my index.html:
<!DOCTYPE html>
<html ng-app="appModule" ng-controller="controller">
<head>
<title>this is the title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<ul>
<li>{{section.item1}}</li>
<li>{{section.item2}}</li>
<li>{{section.item3}}</li>
</ul>
<div ng-repeat='product in section.products_section.list_products'>
<directive data='product'></directive>
</div>
</body>
<script src="angularjs/app.js"></script>
</html>
my app.js:
angular.module('appModule', []).controller('controller', ['$scope', function($scope) {
$scope.section = {
item1: 'this is item1',
item2: 'this is item2',
item3: 'this is item3',
products_section: {
list_products: [
{
product_name: 'name 1'
}, {
product_name: 'name 2'
}, {
product_name: 'name 3'
}
] //end of list_products
}
};
}]).directive('directive', [function() {
return {
restrict: 'E',
scope: {
date: '='
},
templateUrl: 'angularjs/template.html',
replace: true,
controller: function($scope) {
console.log('this is controller in directive is called');
}
};
}]);
my template html:
<ul>
<li>{{product.product_name}}</li>
<li>this-is-to-show-this-is-being-executed</li>
</ul>
firefox console:
this is controller in directive is called
what it appears like in browser:
this is item1
this is item2
this is item3
this-is-to-show-this-is-being-executed
this-is-to-show-this-is-being-executed
this-is-to-show-this-is-being-executed
SORRY, Stackoverflow says that I need at least 10 rep to post images.
I see a couple things wrong.
scope: {
date: '='
}
Should be:
scope: {
data: '='
},
And your reference to the scope variable in the directive should be data. not product.
<ul>
<li>{{data.product_name}}</li>
<li>this-is-to-show-this-is-being-executed</li>
</ul>
This works.
app.js
angular.module('appModule', [])
.controller('controller', ['$scope', function($scope) {
$scope.section = {
item1: 'this is item1',
item2: 'this is item2',
item3: 'this is item3',
products_section: {
list_products: [
{
product_name: 'name 1'
}, {
product_name: 'name 2'
}, {
product_name: 'name 3'
}
] //end of list_products
}
};
}])
.directive('directive', [function(scope) {
return {
restrict: 'E',
templateUrl: 'template.html',
replace: true,
};
}]);
index.html
<!DOCTYPE html>
<html ng-app="appModule" ng-controller="controller">
<head>
<title>this is the title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
</head>
<body>
<ul>
<li>{{section.item1}}</li>
<li>{{section.item2}}</li>
<li>{{section.item3}}</li>
</ul>
<ul>
<li>{{section.products_section.list_products[0].product_name}}</li>
<li>{{section.item2}}</li>
<li>{{section.item3}}</li>
</ul>
<div ng-repeat='product in section.products_section.list_products'>
<directive></directive>
</div>
<script src="app.js"></script>
</body>
</html>
Plunkr
I have created a demo at plnkr. I want to disable a particular tab say migration, I tried by writing disabled: true but it doesn't seem to work.
http://plnkr.co/edit/0XgquovKIICmgGcSVSef?p=preview
html code:
<!doctype html>
<div ng-app="TabsApp">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
<script src="example.js"></script>
<link href="punk.css" rel="stylesheet">
</head>
<body>
<div id="tabs" ng-controller="TabsCtrl">
<ul>
<li ng-repeat="tab in tabs"
ng-class="{active:isActiveTab(tab.url)}"
ng-click="onClickTab(tab)">{{tab.title}}</li>
</ul>
<div id="mainView">
<div ng-include="currentTab"></div>
</div>
</div>
</body>
</html>
Controller code :
angular.module('TabsApp', [])
.controller('TabsCtrl', ['$scope', function ($scope) {
$scope.tabs = [{
title: 'One',
url: 'coredcplan.html',
}, {
title: 'Two',
url: 'migration.html',
disabled: true,
}, {
title: 'Three',
url: 'schedule.html',
}];
$scope.currentTab = 'coredcplan.html';
$scope.onClickTab = function (tab) {
$scope.currentTab = tab.url;
}
$scope.isActiveTab = function(tabUrl) {
return tabUrl == $scope.currentTab;
}
}]);
What you can do is give a property disabled, and check that on the tab click:
$scope.tabs = [{
title: 'One',
url: 'coredcplan.html'
}, {
title: 'Two',
url: 'migration.html',
disabled: true
}, {
title: 'Three',
url: 'schedule.html'
}];
$scope.onClickTab = function (tab) {
if(tab.disabled)
return;
$scope.currentTab = tab.url;
}
See this plunker