I'm new to angular and i'm trying to use ng-switch to dynamically load templates using include in bootstrap modal but click doesn't seem to work. What am i doing wrong here ?
HTML
ModalContent.html
<div ng-controller="Nav" class="modal-body">
<div class="left-nav" ng-include="'LeftNav.html'"></div>
<div class="right-nav" ng-include="'RightNav.html'"></div>
</div>
LeftNav.html
<ul>
<li ng-repeat="item in items">
{{ item }}
</li>
</ul>
RightNav.html
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<div ng-switch-when="item2">
<div ng-include="'Item2.html'"></div>
</div>
<div ng-switch-when="item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>
JS
var app = angular.module('plunker', ['ngRoute', 'ui.bootstrap']);
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
})
Plnkr - http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview
There were a couple of problems.
Here is a working demo: http://plnkr.co/edit/CZPvD373HbCC2Ism0xlA?p=preview
Comments inline:
Controller
app.controller('Nav', function($scope) {
$scope.items = ['Item1', 'Item2', 'Item3'];
$scope.page = $scope.items[0];
$scope.selectItem = function (item) {
$scope.page = item;
}
})
LeftNav template
<ul>
<li ng-repeat="item in items">
<!-- calling `selectItem` on the controller to set the `page`
otherwise `page` will be set on the current `ng-include` scope
and will be unavailable elsewhere -->
{{ item }}
</li>
</ul>
RightNav template
<!-- 'page' is now from the 'Nav' controller's $scope -->
<div ng-switch on="page">
<div ng-switch-when="Item1">
<div ng-include="'Item1.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item2">
<div ng-include="'Item2.html'"></div>
</div>
<!-- String matches are case sensitive -->
<div ng-switch-when="Item3">
<div ng-include="'Item3.html'"></div>
</div>
<div ng-switch-default>
<h1>Default</h1>
</div>
</div>
Related
Is anyone help me, when I start to code to show data in blade with angularJS, data not showing in the page, even the data exists in the console. This following code in my app.js
// app.js
$scope.view_tab = 'shop1';
$scope.changeTab = function(tab) {
$scope.view_tab = tab;
}
// List product
$scope.loadProduct = function () {
$http.get('/getproduct').then(function success(e) {
console.log(e.data);
$scope.products = e.data.product;
$scope.totalProduct = $scope.products.length;
$scope.currentPage = 1;
$scope.pageSize = 9;
$scope.sortKey = 'id_kain';
};
//index.blade.php
<div class="shop-top-bar">
<div class="shop-tab nav">
<a ng-class="{'active': view_tab == 'shop1'}" ng-click="changeTab('shop1')" data-toggle="tab">
<i class="fa fa-table"></i>
</a>
<a ng-class="{'active': view_tab == 'shop2'}" ng-click="changeTab('shop2')" data-toggle="tab">
<i class="fa fa-list-ul"></i>
</a>
</div>
</div>
<div class="shop-bottom-area mt-35">
<div class="tab-content jump">
<div class="tab-pane" ng-class="{active: view_tab == 'shop1'}">
<div class="row">
<div ng-repeat="data in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage: 9" class="col-xl-4 col-md-6 col-lg-6 col-sm-6">
<div class="product-wrap mb-25 scroll-zoom">
<div class="product-img">
<a ng-click="showForm(data)">
<img class="default-img" ng-src="#{{ data.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ data.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
<div class="product-content text-center">
<h3>#{{data.nama_kain}}</h3>
<div class="product-price">
<span>#{{numberingFormat(data.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-pane" ng-class="{active: view_tab == 'shop2'}">
<div dir-paginate="datas in filtered = ( products | filter:search ) | orderBy:sortData | itemsPerPage:9" class="shop-list-wrap mb-30">
<div class="row">
<div class="col-xl-4 col-lg-5 col-md-5 col-sm-6">
<div class="product-wrap">
<div class="product-img">
<a ng-click="showForm(datas)">
<img class="default-img" ng-src="#{{ datas.gambar_kain[0].gambar_kain }}" alt="">
<img class="hover-img" ng-src="#{{ datas.gambar_kain[1].gambar_kain }}" alt="">
</a>
</div>
</div>
</div>
<div class="col-xl-8 col-lg-7 col-md-7 col-sm-6">
<div class="shop-list-content">
<h3>#{{data.nama_kain}}</h3>
<div class="product-list-price">
<span>#{{numberingFormat(datas.data_kain[0].harga_kain)}}</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="pro-pagination-style text-center mt-30">
<dir-pagination-controls
max-size="1"
direction-links="true"
boundary-links="true" >
</dir-pagination-controls>
</div>
</div>
Data still not shows in the page, there are not errors in this page, but I don't know how can I fix this.
As I know there is two way to show data in Angular JS when you define the scopes then you need the ng-bind or ng-model to show data in the front end.
1- AngularJS Data Binding
live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQ2GSJ3EO
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-bind="firstname "></p>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstname = "John will be change";
});
</script>
2-AngularJS ng-model Directive
Live Example https://www.w3schools.com/code/tryit.asp?filename=G2DQQEUEPSOC
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input ng-model="name">
<h1>You entered: {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
NOTE: try with static data and then check that you have valid data to make it dynamic
I hope this helps you!
I have two arrays. If ctrl.type == 'group' I want to do an ng-repeat
<div ng-repeat="category in ctrl.categories">
...
<div ng-repeat="item in category.group_items">...</div>
</div>
else, it should be
<div ng-repeat="category in ctrl.categories">
...
<div ng-repeat="item in category.data.other_items">...</div>
</div>
what's the best way to write this? I don't want to rewrite the ... as it's the same code.
Make a function that returns the array in your controller.
ctrl.getArray = () => {
if(ctrl.type === 'something') {
return ctrl.data.group_items;
}
return ctrl.data.other_items;
}
And in the view:
<div ng-repeat="item in ctrl.getArray()">...</div>
It can also be done using ng-switch. Below is my controller code where i have defined two arrays and also defined type on which your data will be shown.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.type = 'something';
$scope.categories=[{ID:'1',Name:'Test 1'},{ID:'2',Name:'Test 2'},{ID:'3',Name:'Test 3'}];
$scope.group_items=[{ID:'1',Name:'Group 1'},{ID:'2',Name:'Group 2'},{ID:'3',Name:'Group 3'}];
});
Below is the html bindings.
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-switch="type">
<div ng-switch-when="group">
<div ng-repeat="item in categories">
<p>{{item.Name}}</p>
</div>
</div>
<div ng-switch-when="something">
<div ng-repeat="item in group_items">
<p>{{item.Name}}</p>
</div>
</div>
</div>
</div>
I have been using carousel slider in my application and works fine with this code
JS
var app = angular.module('myApp', []);
app.controller('offerCtrl', function ($scope, $http) {
$scope.stores = ["Emil", "Tobias", "Linus"];
});
CsHtml
<div class="container" ng-app="myApp" ng-controller="offerCtrl">
<div class="dynamicTile">
<div class="row">
<div class="col-sm-6 col-xs-6" ng-repeat="x in stores">
<div id="{{ 'tile' + ($index + 1) }}" class="tile">
<a href="#" class="rippler rippler-default">
<div class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item" ng-repeat="x in stores" ng-class="{'active': $first}">
<img src="~/assets/images/Stores/{{x.StoreId}}/Product/{{y.ProductId}}.png" class="img-responsive" />
<span class="caption"><i class="fa fa-tags"></i>{{y.ProductName}}</span>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
<div class="row " style="">
<div class="col-sm-12">
Show All
</div>
</div>
</div>
</div>
but when i changed my JS code to fetch data dynamically, carousel stop working i.e. images not sliding.
Problem occur with this jS
var app = angular.module('myApp', []);
app.controller('offerCtrl', function ($scope, $http) {
$http.get("..//Home/getOffers")
.then(function (response) { $scope.stores = response.data; });
});
What causing the problem ?
i have a code in which i want to iterate element inside two differnet row.
Is it Possible to do it using single ng-repeat because i need the above row column structure to be fixed.only content should be dynamic ?
<div class="row sortable">
<div class="col-md-6">
<div class="row">
<div class="col-md-12" ng-repeat="graph in graphs" ng-if="$even">
<div> content.....</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="row">
<div class="col-md-12" ng-repeat="graph in graphs" ng-if="$odd">
<div> content.....</div>
</div>
</div>
</div>
</div>
Just set the ng-repeat as a parent of your rows as follow:
<div class="row sortable">
<div class="col-md-6">
<div class="col-md-12" ng-repeat="graph in graphs">
<div class="row" ng-if="$even">
<div> content.....</div>
</div>
<div class="row" ng-if="$odd">
<div> content.....</div>
</div>
</div>
</div>
</div>
UPDATE
If you don't want to repeat the <div class="row>, you can create an HTML template and use two ng-include with different controllers on the HTML parent. I created a Plunker example:
Parent HTML:
<body ng-app="includeExample">
<div ng-controller="ExampleController">
<div ng-controller="TemplateController1">
<div ng-include="template"></div>
</div>
<div ng-controller="TemplateController2">
<div ng-include="template"></div>
</div>
</div>
</body>
JS File:
(function(angular) {
'use strict';
angular.module('includeExample', ['ngAnimate'])
.controller('ExampleController', ['$scope', function($scope) {
$scope.template = "template1.html";
}])
.controller('TemplateController1', ['$scope', function($scope) {
$scope.foo = "bar";
}])
.controller('TemplateController2', ['$scope', function($scope) {
$scope.foo = "test";
}]);
})(window.angular);
Template:
{{foo}}
I'm using angular include to insert the html's in the page and below is the code for it.
RightNav.html
<div ng-switch on="page">
<div ng-switch-when="Games">
<div ng-include="'Games.html'"></div>
</div>
<div ng-switch-when="Music">
<div ng-include="'Music.html'"></div>
</div>
<div ng-switch-when="Videos">
<div ng-include="'Videos.html'"></div>
</div>
</div>
LeftNav.html
<ul>
<li ng-repeat="item in items">
{{item.name}}
</li>
</ul>
JS
app.controller('Nav', function($scope) {
$scope.items = [
{
name : 'Music'
},
{
name : 'Videos'
},
{
name : 'Games'
}
];
$scope.page = $scope.items[0].name;
$scope.selectedItem = function(item) {
$scope.page = item.name;
}
})
I tried using ng-repeat in RightNav.html and it doesn't work what am i doing wrong here?
<div ng-switch on="page">
<div ng-repeat="item in items">
<div class="item.name" ng-switch-when="{{item.name}}">
<div ng-include="'{{item.name}}.html'"></div>
</div>
</div>
</div>
Demo : http://plnkr.co/edit/D1tMRpxVzn51g18Adnp8?p=preview
In your case you do not need ng-repeat. You can directly bind the expression to ng-include. Also when i tried ng-switch when part does not take expression. Also using the . notation for selected page as the ng-switch and ng-include creates new scope.
See my fiddle
http://plnkr.co/edit/dPILzsyFoWHfL3Urlso2?p=preview