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}}
Related
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 an array created from a .csv file that I show all of on initial page load, but after a button click, I would like to display only the results of the name of the building the user clicks on.
Here is the html code:
<div class="row" data-ng-controller="StaffListCtrl">
<div class="small-12 columns" >
<h1 class="">The Public Schools of Petoskey Staff</h1>
<header ng-include="'pages/header.html'"></header>
<div class="row">
<div class="small-2 columns"><h4>BUILDING</h4></div>
<div class="small-3 columns"><h4>NAME</h4></div>
<div class="small-2 columns"><h4>PHONE</h4></div>
<div class="small-4 columns"><h4>EMAIL</h4></div>
</div>
<div class="row" id="centralBuilding" data-ng-model="buildingName.central" ng-repeat="person in staff">
<div class="small-2 columns">{{ person.getBuilding() }}</div>
<div class="small-3 columns">{{ person.getFirstName() }} {{ person.getLastName() }}</div>
<div class="small-2 columns">{{ person.getPhone() }}</div>
<div class="small-4 columns">{{ person.getEmail() }}</div>
</div>
</div>
<footer ng-include="'pages/footer.html'"></footer>
</div>
Here is the header.html code:
<div class="row">
<button class="round" id="building1">Building1</button>
<button class="round" id="building2">Building2</button>
<button class="round" id="building3">Building3</button>
</div>
Here is my AngularJS code:
app.js:
(function () {
"use strict";
angular.module('staffApp', []);
})();
controller.js:
(function() {
"use strict";
angular.module('staffApp')
.controller('StaffListCtrl', listStaff);
function listStaff($scope) {
$scope.filters = {};
$scope.staff = setStaffData();
}
})();
If person is an object like
var person = {
building: "",
firstName: "",
lastName: "",
phone:"",
email: ""
}
HTML
<div class="row" id="centralBuilding" data-ng-model="buildingName.central" ng-repeat="person in staff | filter : {building = filterBuilding}">
<div class="small-2 columns">{{ person.getBuilding() }}</div>
<div class="small-3 columns">{{ person.getFirstName() }} {{ person.getLastName() }}</div>
<div class="small-2 columns">{{ person.getPhone() }}</div>
<div class="small-4 columns">{{ person.getEmail() }}</div>
</div>
<div class="row">
<button class="round" id="building1" ng-click="filterByBuilding('Building1')>Building1</button>
<button class="round" id="building2" filterByBuilding('Building2'>Building2</button>
<button class="round" id="building3" filterByBuilding('Building3'>Building3</button>
</div>
CONTROLLER
function filterByBuilding(building){
$scope.filterBuilding = building;
}
In the fiddle which you have given I have found only a slight mistake
Instead of $scope.filterByBuilding you have mentioned as $scope.filterBuilding
Used data/staff2.csv instead of staffList.csv
Take a look at this working demo
Working Demo
script
(function () {
"use strict";
angular
.module('staffApp', [])
.controller('StaffListCtrl', MainCtrl);
function MainCtrl($scope) {
$scope.staff = setStaffData();
$scope.filterByBuilding = function(building) {
$scope.filterBuilding = building;
};
}
})();
html
<body ng-app="staffApp">
<div class="row" data-ng-controller="StaffListCtrl">
<div class="small-12 columns">
<h1 class="">Staff List</h1>
<div class="row">
<button class="round" id="buildingA" ng-click="filterByBuilding('buildingA')">Building A</button>
<button class="round" id="buildingB" ng-click="filterByBuilding('buildingB')">Building B</button>
</div>
<div class="row">
<div class="small-2 columns">
<h4>BUILDING</h4>
</div>
<div class="small-3 columns">
<h4>NAME</h4>
</div>
<div class="small-2 columns">
<h4>PHONE</h4>
</div>
<div class="small-4 columns">
<h4>EMAIL</h4>
</div>
</div>
<div class="row" data-ng-repeat="person in staff | filter:{building:filterBuilding}">
<div class="small-2 columns">{{ person.getBuilding() }}</div>
<div class="small-3 columns">{{ person.getFirstName() }} {{ person.getLastName() }}</div>
<div class="small-2 columns">{{ person.getPhone() }}</div>
<div class="small-4 columns">{{ person.getEmail() }}</div>
</div>
</div>
</div>
</body>
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>
Why? html:
<div ng-app="myApp">
<div ng-controller="testCtrl">
<div data-ng-show="{{tags.length > 2}}"><p>{{tags}}</p></div>
<p>{{tags.length > 2}}</p>
</div>
</div>
js:
.controller('testCtrl', function($scope){
$scope.tags = 'Go go go';
});
And shows only 'true'... Why div is hidden?
http://jsfiddle.net/3HT2F/11/
As #user2422960 says, you just need to remove the {{ and }} because ng-show already expects an expression:
<div ng-app="myApp">
<div ng-controller="testCtrl">
<div data-ng-show="tags.length > 2"><p>{{tags}}</p></div>
<p>{{tags.length > 2}}</p>
</div>
</div>
Here is an updated fiddle.
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