I am looking for a way to implement ng-repeat next-prevous navigation. Navigation is inside repeating area, so the navigation arrows are shown if next or previous items exists.
But I need a way to add an active class to repeater on ng-click, so if I navigate to next item, it receives active class (and same with previous), so i can make that item visible and all other hidden.
<li ng-class="{active: ?}" ng-repeat="page in pages">
<p ng-bind-html-unsafe="page.content"></p>
<a ng-show="pages[$index - 1]" ng-click="?" class="previous" href="#">Previous</a>
<a ng-show="pages[$index + 1]" ng-click="?" class="next" href="#">Next</a>
</li>
Also if there is another way around this, please advise.
HTML:
<div ng-controller="MyCtrl">
<li ng-class="{active: activePage.page == $index,
inactive: activePage.page != $index}" ng-repeat="page in pages">
<p ng-bind-html-unsafe="page.content"></p>
<a ng-show="pages[$index - 1]" ng-click="activePage.page = $index-1"
class="previous" href="#">Previous</a>
<a ng-show="pages[$index + 1]" ng-click="activePage.page = $index+1"
class="next" href="#">Next</a>
</li>
</div>
CSS:
.active{
display:block;
}
.inactive{
display:none;
}
JS:
function MyCtrl($scope, $rootScope) {
/* Dont use a primitive but an object as ng-repeat creates
a scope of its own */
$scope.activePage = {
page:0
};
$scope.pages = [{content:"a"},{content:"b"},{content:"c"}];
}
Related
I have a list of orders that I sort based on status key. Then I display it using ng-repeat in bars. I can click Accept button to move one order from submitted to accepted. The question is: How do I refresh the bar displaying accepted orders?
HTML
<div class="bar" ng-controller="AdminCtrl">
<li ng-repeat="order in submitted">
<div >
<p >{{order.name}} </p>
<p>{{order.total}}</p>
<button class="btn" ng-click="acceptOrder(order)">Akceptuj</button>
</div>
</li>
</div>
<div class="bar" ng-controller="AdminCtrl" >
<li ng-repeat="order in delivery">
<div >
<p >{{order.name}} </p>
<p>{{order.total}}</p>
<button class="btn" ng-click="addOrderToDeliveryQueue(order)">Dodaj do kolejki dostawy</button>
</div>
</li>
</div>
</div>
JS
$scope.submitted = [];
$scope.accepted = [];
$scope.delivery = [];
angular.forEach($scope.orders, function(value, key) {
if (value.status == 'submitted')
$scope.submitted.push(value);
if (value.status == 'accepted')
$scope.accepted.push(value);
if (value.status == 'delivery')
$scope.delivery.push(value);
});
$scope.acceptOrder = function(order) {
var index = $scope.submitted.indexOf(order);
order.status = 'accepted';
$scope.accepted.push(order);
$scope.submitted.splice(index, 1);
AngularJS handles refreshing ng-repeat directives automatically when it sees a change in the collection. You are not seeing this behavior because you are actually creating multiple independent instances of your AdminCtrl controller. Each of your divs has this: ng-controller="AdminCtrl". This creates a new instance of the AdminCtrl scoped to that div. What you really want is one instance of that AdminCtrl. You can achieve this by moving the ng-controller directive to the outermost container element.
<div ng-controller="AdminCtrl">
<div class="bar">
<li ng-repeat="order in submitted">
// your markup
</li>
</div>
<div class="bar">
<li ng-repeat="order in accepted">
// your markup
</li>
</div>
</div>
// etc.
angular 1.5
I'm creating a menu that on ng-click= i am getting the variable and than on ng-class setting that variable to true for the menu and the content.
Goal is on click to add/remove an active class to the parent and to the content div.
can't get my head around this one
<div ng-controller="myCtrl">
<ul>
<li class="animate" ng-class="{activelist: fonts ==!hidden }">
<a ng-click="activeMenu('fonts')" class="nav-icon">
menu font
</a>
</li>
<li class="animate" ng-class="{activelist: edit ==!hidden }">
<a ng-click="activeMenu('edit')" class="nav-icon">
menu edit
</a>
</li>
<ul>
<div class="">
<div class="fonttext" ng-class="{activelist: fonts ==!hidden }"></div>
<div class="edittext" ng-class="{activelist: edit ==!hidden }" ></div>
</div>
</div>
<script>
var myapp = angular.module('app', []);
myapp.controller('myCtrl', function($scope){
$scope.activeMenu = function (menuvar){
//getting the variable that gets passed via func
$scope.variable = menuvar;
// set the variable to be true no working
$scope.menuvar = true;
}
});
</script>
You can set a variable directly in ng-click to true. This variable can then be used in ng-class to dynamically add or remove classes. Here is an example:
<li class="animate" ng-class="{'activelist': fonts }">
<a ng-click="fonts = !fonts" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': edit }">
<a ng-click="edit = !edit" class="nav-icon"></a>
</li>
You can also set the variable in the controller:
HTML:
<li class="animate" ng-class="{'activelist': menu.fonts }">
<a ng-click="switchMenu('fonts')" class="nav-icon"></a>
</li>
<li class="animate" ng-class="{'activelist': menu.edit }">
<a ng-click="switchMenu('edit')" class="nav-icon"></a>
</li>
Controller:
$scope.menu = {};
$scope.switchMenu = function(selectedMenu) {
$scope.menu[selectedMenu] = !$scope.menu[selectedMenu];
};
How can I get the selected value from below dropdown.?
<ul class="nav-drop-menu" id="ddlHotelSort">
<li class="liselect" value="{{ssort.Sort}}" ng-repeat="ssort in vm.searchsort">
<a href="javascript:void(0)" class="SortClass" name="Sortclass" style="left:0px" value="{{ssort.Sort}}">{{ssort.Name}}
</a>
</li>
</ul>
Below is image of dropdown opening..
How can I handle event and model value in angular application..?
<ul class="nav-drop-menu" id="ddlHotelSort">
<li class="liselect" ng-click="getSelectedItem(ssort);" value="{{ssort.Sort}}" ng-repeat="ssort in vm.searchsort">
<a href="javascript:void(0)" class="SortClass" name="Sortclass" style="left:0px" value="{{ssort.Sort}}">{{ssort.Name}}
</a>
</li>
</ul>
controller function
$scope.getSelectedItem = function(item){
console.log(item);//selected item
}
Just call a function in the li click, here is an example with your options.
Just click on each li,
var app=angular.module('myApp',[])
app.controller('MyCtrl',MyCtrl)
function MyCtrl($scope) {
$scope.opts = ["Recommended","FirstClass","SecondClass","ThirdClass" ];
$scope.my_method = function(opt)
{
alert(opt)
}
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app ng-controller="MyCtrl">
<ul>
<li ng-repeat=" opt in opts" ng-click="my_method(opt)">
{{ opt }}
</li>
</ul>
<p>{{opt}}</p>
</div>
Run the code snippet and click on each li
HEre is an example fiddle with your options
I have use toggle menu from simple toggle .but my problem that when we click on specific menu then all other menu should be close like as accordion menu.
Directive :
element.bind('click', function() {
var content = target.querySelector('.slideable_content');
if(!attrs.expanded) {
content.style.border = '1px solid rgba(0,0,0,0)';
var y = content.clientHeight;
content.style.border = 0;
target.style.height = y + 'px';
} else {
target.style.height = '0px';
}
attrs.expanded = !attrs.expanded;
});
when click on slide above code will execute.i need some logic like close all toggle which class name slidable_content
My Code is here : Plunker
#Michael is right, you can use the two way data binding to do that easily
<section>
<ul>
<li>
<span ng-click="isExpanded = ! isExpanded">Show 1</span>
</li>
<li ng-show="isExpanded" slider id="test2">
<p>Are to hide and show adf</p>
</li>
</ul>
</section>
So, you can control the state of the other menus if you want
UPDATE:
Try this:
<section>
<ul>
<li slider-toggle ng-click="expandItem = 1">Slider 1</li>
<li ng-if="expandItem == 1" slider id="test1">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 2">Slider 2</li>
<li ng-if="expandItem == 2" slider id="test2">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 3">Slider 3</li>
<li ng-if="expandItem == 3" slider id="test3">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="expandItem = 4">Slider 4</li>
<li ng-if="expandItem == 4" slider id="test4">
<p>Are to hide and show</p>
</li>
</ul>
</section>
In this way you can create an accordion menu, just getting the value of the element that you want to show and validating it with the ng-if directive (you can use ng-show if you want, you can find the difference here: docs.angularjs.org/api/ng/directive)
Note:
You shouldn't get elements of the DOM with jquery or javascript selectors, if you want to control an element of the DOM you can use a directive, as an example:
script.js:
.directive('someDirective',function(){
return{
restrict:'A',
scope:true,
templateUrl:'someTemplate.html',
link: function(scope, element, attrs){
console.log(element) //This will be your element
}
}
})
main.html:
<li some-directive ng-click="expandItem = 4">Slider 4</li>
UPDATE
If you want to close the current open item, you can control the open/close state with a function.
Try this:
main.html
<body ng-app="myApp">
<section ng-controller="myCtrl">
<ul>
<li slider-toggle ng-click="setCurrentItem(1)">Slider 1</li>
<li ng-show="currentItem == 1" slider id="test1">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(2)">Slider 2</li>
<li ng-show="currentItem == 2" slider id="test2">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(3)">Slider 3</li>
<li ng-show="currentItem == 3" slider id="test3">
<p>Are to hide and show</p>
</li>
<li slider-toggle ng-click="setCurrentItem(4)">Slider 4</li>
<li ng-show="currentItem == 4" slider id="test4">
<p>Are to hide and show</p>
</li>
</ul>
</section>
</body>
app.js
var myApp = angular.module('myApp', []);
myApp.controller("myCtrl", ["$scope", function ($scope) {
$scope.currentItem = null;
$scope.setCurrentItem = function (itemId) {
if(itemId == $scope.currentItem){
$scope.currentItem = null;
}else{
$scope.currentItem = itemId;
}
}
}])
I have a list of items ("locals" array) which I show in a list
<ul class="list-group">
<li ng-repeat="loc in locals" class="list-group-item"><a href="" data-id={{loc.ID}}>{{loc.location}}</a>
</li>
</ul>
I want the user to be able to select an item, and then to use this item in code.
What is the preferred way to do it.
Also I am creating the application for mobile, so I should be able to know that the user chose this item in mobile( and not just use mouseclick for example).
You can make use of angular js ng-click event (on the li item where ng-repeat is and do something like this: fiddle
code snippet of controller:
function MyCtrl($scope) {
$scope.templateList = [{id:1, name: 'Template1'}, {id:2, name: 'Another Template'}]
$scope.template = {};
$scope.setValue = function(list) {
$scope.template.template_id = list.id;
$scope.template.template_name = list.name;
}
}
Of HTML:
<div ng-app>
<form ng-controller="MyCtrl">
<input type="hidden" name="template_id" ng-model="template.template_id" />
<input type="text" name="template_name" ng-model="template.template_name" />
<ul>
<li ng-repeat="list in templateList" ng-click="setValue(list)">{{list.name}}</li>
</ul>
</form>
</div>
Try this:
In html,
<ul class="list-group">
<li ng-repeat="loc in locals" class="list-group-item">
<a href="" data-id={{loc.ID}} ng-click="selectLoc(loc.location)">
{{loc.location}}
</a>
</li>
</ul>
In JS,
$scope.selectLoc = function(location){
console.log(location);
//Here you will get the selected location.
var SomeVar = location;
}
Hope this helps....