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>
Related
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>
I study AngularJS, now try to add an attribute based on one (or multiple) condition(s).
But this code (CodePen here) doesn't seem to work:
function myController($scope) {
console.log("start");
$scope.item = { myBool: false };
$scope.myClick = function(e) {
var myHref = angular.element(e.delegateTarget).data(href);
console.log(myHref);
};
}
.test{background: lightblue; height: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div np-app ng-controller="myController">
<div class="test"
data-href="{undefined: !item.myBool, 'http://yes.com': item.myBool}"
ng-click="myClick($event);console.log('end');">click & see the console</div>
</div>
actually the data-href attribute should not be defined, as myBool == false...
Use interpolation for that:
angular.module('myApp', [])
.controller('myController', function($scope) {
console.log("start");
$scope.item = {
myBool: false
};
$scope.myClick = function(e) {
$scope.item.myBool = !$scope.item.myBool;
console.log(angular.element(e.target).attr("href"));
};
});
.test{background: lightblue; height: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="test" href="{{item.myBool ? 'http://yes.com' : undefined}}" ng-click="myClick($event)">
click & see the console
</div>
</div>
Finally, updated a little bit the Vanojx1 answer to:
angular.module('myApp', [])
.controller('myController', function($scope) {
console.log("start");
$scope.item = { myBool: false };
$scope.myClick = function(e) {
$scope.item.myBool = !$scope.item.myBool;
console.log(angular.element(e.target).attr("href"));
console.log(angular.element(e.target).attr("noarg"));
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
<div class="test" ng-attr-href="{{item.myBool? 'http://yes.com' : undefined}}" ng-click="myClick($event)">
click & see the console
</div>
</div>
Important improvements:
updated the Angular version to be > 1.3 (actually I used an ancient one);
used the ng-attr-xxx attribute that is removed (the attribute itself, not just its value) if its value estimated to undefined;
Tried the below markup:
`<td ng-style="isTrue && {'background-color':'yellow'}">`
where I am trying to highlight in yellow if the cell value is true but the code is not working. What could be the cause?
Keep in mind that ng-style is an AngularJS attribute. You should do something like:
angular.module('app', []).controller('myctrl', function($scope) {
$scope.isTrue = true;
});
div[ng-style] {
width: 150px;
height: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='app' ng-controller='myctrl'>
<div ng-style="{ 'background-color' : isTrue ? 'yellow' : 'red'}">
</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>