I have used ng-repeat to display a set of values as hyperlink which further opens related data in very next DIV. Now when I click on the link, after loading data in respective div, how can I disable the clicked link?
angular.module('app', []).controller('ctrl', function($scope){
$scope.items = [
{name:'First', descr:'First Description'},
{name:'Second', descr:'Second Description'},
{name:'Third', descr:'Third Description'}
]
var visited = [];
$scope.act = function(item){
if(visited.indexOf(item.name) == -1){
item.dis = true;
$scope.active = item;
visited.push(item.name);
}
}
})
.dis {
color: currentColor;
cursor: not-allowed;
opacity: 0.5;
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js">
</script>
<div ng-app='app' ng-controller='ctrl'>
<a ng-class='{dis:x.dis}' ng-repeat-start='x in items' href='#' ng-click='act(x)'>
{{x.name}}
</a>
<br ng-repeat-end>
<div>
{{active.descr}}
</div>
</div>
Related
I wanted to disable a div section using ng-disabled, but it dint work. I've also tried using fieldset in place of div.
ng-disabled seems not working.
Below is the view part:
<div ng-disabled="model.disableDate">
<div>Date</div>
<div ion-datetime-picker ng-model="model.timeEntryDate" ng-change="onTimeEntryDateChange()" date="true" time="false" monday-first="true" am-pm="true">{{model.timeEntryDate|| "Select" | date: "dd/MM/yyyy"}} <i class="icon ion-ios-calendar-outline"></i> </div>
</div>
This is the controller part:
if ($scope.model.pageState === condition) {
$scope.model.disableDate = true;
}
Any way this calender is being popped even on the disabling condition.
You can't disable DIV. Disable work with button and input types only. You can try with css. Use ng-class.
<div ng-class="{ 'div-disabled': model.disableDate}"> // give condition here as per your scenario
.div-disabled
{
pointer-events: none;
opacity: 0.5;
background: #CCC;
}
You can create an attribute directive to disable any div. See below:
var app = angular.module("myApp", []);
app.directive("disableSection", function() {
return {
restrict : "A",
link:function(scope,element,attr,ctrl){
element.css({
cursor :"not-allowed",
opacity: "0.5",
background: "#CCC"
});
}
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div disable-section>This is disabled div</div>
</body>
You can use pointer-events: none for disabling the div:-
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.obj = {};
$scope.obj.disabled = false;
$scope.clickMe = function(){
alert('div is enabled');
}
});
.disabled {
pointer-events: none;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<div ng-class="(obj.disabled)?'disabled':''" style="width:100px;height:100px;border:1px solid black">
<a style="cursor:pointer" ng-click="clickMe()">Click Me</a>
</div>
<button ng-click="obj.disabled = !obj.disabled">{{(obj.disabled)?'Enable':'Disable'}}</button>
</div>
So the thing is:
I have four cards and I have a ng-click on the first one with a function named OpenCard().
When I click, it shows its hidden content.
I wanna do the same for the rest of the cards, using the same call to OpenCard().
My four classes have the same name "rowCont" and the hidden content inside that "rowCont" is different:
<div class="rowCont" ng-click="OpenCard()" ng-class="{'active': isActive}">
<div class="hiddenContent">
<div class="animate-show" ng-show="cardVisible">
</div>
</div>
</div>
$scope.isActive = false;
$scope.OpenCard = function () {
if($scope.isActive == false) {
$scope.isActive = true;
$scope.cardVisible = true;
} else {
$scope.isActive = false;
$scope.cardVisible = false;
}
}
I'm using Angular 1.6.0
Do you have an idea how can I refer to one card in specific using the same function on ng-click? Cause when I click one in one closed card it shows the content of all cards.
<div class="row">
ng-repeat="x in current_tab
ng-class="{active1 : activeMenu === x}"
ng-click="setActive(x);"> {{x.userId}}
</div>
$scope.menuItems = $rootScope.current_tab;
$scope.activeMenu = $scope.menuItems[0];
$scope.setActive = function(menuItem) {
$scope.activeMenu = menuItem
}
var app = angular.module("ngClickApp", []);
app.controller('ngClickCtrl', ['$scope', function ($scope) {
$scope.cards = [{
isActive: false,
title: '1',
content: 'content 1'
}, {
isActive: false,
title: '2',
content: 'content 2'
}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="ngClickApp">
<head>
<title>Validation messages</title>
</head>
<body ng-controller="ngClickCtrl">
<div class="rowCont" ng-repeat="card in cards track by $index" ng-click="card.isActive=!card.isActive" ng-class="{'active': c.isActive}">
card {{$index}}
<div class="hiddenContent">
<div class="animate-show" ng-show="card.isActive">
{{card.content}}
</div>
</div>
</div>
</body>
</html>
You can store card's visibility in an array ($scope.cardsVisible = [];), and pass an index in each call to OpenCard(cardIndex).
Then, display it conditionnaly in your view:
var myApp = angular.module('myApp', []);
function MyCtrl($scope) {
$scope.cardsVisible = [];
$scope.OpenCard = function(cardIndex) {
$scope.cardsVisible[cardIndex] = true;
$scope.isActive = cardIndex;
}
}
.active {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<div ng-click="OpenCard(1)" ng-class="{'active': isActive == 1}">
Card 1
<div ng-show="cardsVisible[1]">
This card is visible
</div>
</div>
<div ng-click="OpenCard(2)" ng-class="{'active': isActive == 2}">
Card 2
<div ng-show="cardsVisible[2]">
This card is visible
</div>
</div>
</div>
I need to switch between to div's. Div class="wrapper" must be visible by default. Div class="form" must be shown after admin approve. The problem is when i click on <a ng-click="toggle()"> it works only once, and no reaction after. If i will add some ng-hide to 'wrapper', ng-click works, but show/hide only 'form'. <a> must be shown after controller response, like class="form".
HTML:
<div class="body" ng-class="{'show': show && showTemp}">
<a ng-click="toggle()"></a>
<div class="form"></div>
<div class="wrapper"></div>
</div>
CSS:
.form {
display: none;
}
.wrapper {
display: block;
}
.show .form {
display: block;
}
.show .wrapper {
display: none;
}
Controller:
$scope.show = false;
$scope.showTemp = true;
// response from admin
$scope.$on('$show', function(e,data) {
$scope.show = true;
$scope.available = data;
});
// this click by user
$scope.toggle = function() {
$scope.showTemp = !$scope.showTemp;
};
Why can't you do something simpler like:
<div class="body" ng-init="showForm = false">
<a ng-click="showForm = available && ? false : !showForm">Click</a>
<div class="form" ng-show="showForm"></div>
<div class="wrapper" ng-hide="showForm"></div>
</div>
By using ngInit I'm setting a default value to showForm to false (You can do it from the controller as-well ($scope.showForm = false;) and then I toggle the ng-hide class (Which is found in angular.css any simply defined as .ng-hide {display: none;}) to show/hide the form and the wrapper DIVs.
When you click on the button the following condition is evaluated: showForm = available && ? false : !showForm - The showForm will always be hidden if there is no data available, and if there is data avalable, it will toggle between the form and the wrapper.
You can also add ng-show="available" to the button so it's only visible once there's data, because before it does nothing. A working example:
angular.module('app',[]).controller('ctrl', function($scope) {
$scope.setData = function(data) {
$scope.available = data;
$scope.showForm = true;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
<div class="body" ng-init="showForm = false">
<a ng-show="available" ng-click="showForm = !showForm">Click</a>
<br>
<div class="form" ng-show="showForm">THIS IS THE FORM<br>{{available | json}}</div>
<div class="wrapper" ng-hide="showForm">THIS IS THE WRAPPER</div>
<button ng-hide="available" ng-click="setData({val: 'test'})">SET MOCK DATA</button>
</div>
</div>
I have a nested state .
The view associated to it my app header.
it looks like this:
<ion-view cache-view="false">
<div class="navbar-fixed-top navbar-header bar bar-header " ng-if="showHeader">
<div class="container row">
{{ showSubHeader}}
<div ng-if="showSubHeader" class="topPull" draggable >
<button ng-if="showSubHeader" class="button-icon"><img src="img/topImg.jpg"></button>
</div>
</div>
</div>
</ion-view>
Now, I want div to be shown when showSubHeader is true.
The expression {{ showSubHeader }} changes from true to false correctly, but div does not hide/show according to value variable.
Is there a way to fix it?
Initially on page load, div shows/hides accordingly but div does not hide when variable value changes after loading.
controller:
.controller('AppCtrl', function($scope, $rootScope, $ionicModal, $timeout, $ionicSlideBoxDelegate, $state) {
$scope.showHeader=true;
$scope.showSubHeader=true;
$scope.checkBill= function(){
$scope.showSubHeader=false;
$state.go('menu.TotalBill')
}
})
Change $scope.showSubHeader=false; to $scope.showSubHeader =!$scope.showSubHeader;, then you will be fine.
Check out my example:
var app = angular.module('app', []);
app.controller('myctrl', ['$scope', function($scope) {
$scope.test = true;
$scope.hidden_test = true;
$scope.click = function() {
$scope.hidden_test = !$scope.hidden_test;
};
}]);
.outer {
background: #e2e2e2;
border: 1px solid #000000;
.inner {
background: #c2c2c2;
border: 1px solid #00aa00;
padding: 1px 0 0 25px;
}
}
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div ng-app="app">
<div ng-controller="myctrl">
<div class="outer" ng-if="test">
<p>Test</p>
<div class="inner" ng-if="hidden_test">
<p>Hidden Test</p>
</div>
<button ng-click="click()">Click</button>
</div>
</div>
</div>
I want to remove active class from an li and add it to another li.
I know how to do it with jQuery but I don't know how to make it work with AngularJS.
Here is my code :
$(document).ready(function() {
// event to nav bar header
$("ul.nav li").click(function() {
$("ul.nav li").removeClass("active");
$(this).addClass("active");
});
});
Demo Here
You can build up an array of your nav items in your scope and call a function which sets a variable to true if the respective string matches.
Furthermore, I suggest building your nav with ng-repeat based on this very array.
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
var navArr = [
'home',
'help',
'admin'
];
$scope.setNavActive = function(str) {
console.log(str);
angular.forEach(navArr, function(item) {
console.log(item);
$scope[item] = (str == item);
});
};
$scope.home = true;
}
.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
color: #fff;
background-color: #6da54d;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<ul class="nav nav-pills pull-right mynavbar">
<li ng-class="{active: home}" ng-click="setNavActive('home')"><a ng-href="#/">Home</a></li>
<li ng-class="{active: help}" ng-click="setNavActive('help')"><a ng-href="#/help">Help</a></li>
<li ng-class="{active: admin}" ng-click="setNavActive('admin')"><a ng-href="#/administration">Administration</a></li>
</ul>
</div>
I like to use the ternary operator
ng-class="(clickedBoolean) ? 'active' : ''"
Just change clickedBoolean to whatever your click event is changing and your ng-class directive will act accordingly.