How do i increment camp by say 3 instead of 1 , each time over here?
<div class="row" ng-repeat="camp in camps">
<div class="col-lg-3">
<img src={{camp.img}} alt="" height="200pt" width="250pt"/></div>
<div class="col-lg-5 col-lg-offset-1">{{camp.email}}<br/>
<span>{{camp.campname}}</span><br/>
{{camp.about}}<br/>
{{camp.tgtamt}}<br/>
{{camp.enddate}}<br/><br/>
<button id="view" class="btn btn-default" value1='{{camp.campname}}' value2='{{camp.email}}'>View</button>
</div></div>
<hr/>
</div>
You can try to use $index with ng-show. Something like:
HTML
<div ng-controller = "myCtrl1">
<div class="row" ng-repeat="camp in camps">
<div ng-show="$index % 3 == 0"> <pre>{{camp.name}}</pre></div>
</div>
</div>
Controller
var myApp = angular.module('myModule', []);
myApp.controller('myCtrl1', ['$scope', function($scope) {
$scope.camps=
[{name:"name_1"},{name:"name_2"},{name:"name_3"},{name:"name_4"},{name:"name_5"},
{name:"name_6"},{name:"name_7"},{name:"name_8"},{name:"name_9"},{name:"name_10"}];
}]);
Output:
name_1
name_4
name_7
name_10
see Fiddle
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 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}}
This is used for match the following option.
While I drag the div id 'div2' along with this first div id 'div1' also to be dragged. how to set draggable false for div id 'div1'
.controller('BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2', function($scope, $stateParams, $http)
{
$scope.OnDropComplete = function (index, source)
{
var otherObj = $scope.category_Question[index];
var otherIndex = $scope.category_Question.indexOf(source);
$scope.category_Question[index] = source;
$scope.category_Question[otherIndex] = otherObj;
}
})
--------------------------------------------------------
<div ng-repeat="source in category_Question" ng-controller="BEGINNER_UNIT_1_CONVERSATION_ACTIVITY_2" >
<div class="card" id="div1" draggable="false">
<div class="item item-divider">{{ $index+1 }}.Sentence </div>
<div class="item item-text-wrap" style="color:#CC0066;font-weight:bold;">{{ source.Sentance }}</div>
</div>
<div class="card" id="div2" ng-drop="true" ng-drop-success="OnDropComplete($index,$data)">
<div ng-drag="true" ng-drag-data="source" ng-class="source.Response">
<div class="item item-divider">Response</div>
<div class="item item-text-wrap"> {{ source.Response }} </div>
</div>
</div>
</div>
--------------------------------------------------------
You're using the wrong attribute. draggable="false".
It should be ng-cancel-drag
Your html would look like:
<div class="card" id="div1" ng-cancel-drag>
...
</div>
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>