Worked in Angular js small app, using ng-class, dynamically changing the class on checking the check box.
To be more specific, I want to change the background-color of the checkbox, on checking in and off.
Below is my code snippet :
<style>
.unchecked{
background-color: red;
color:yellow;
}
.checked{
background-color: green;
color:yellow;
}
</style>
<script type="text/javascript">
var myController = function($scope){
console.log("Controller works fine");
$scope.countries=[
{'name':'India','capital':'Delhi','ischecked':'false'},
{'name':'Bangladesh','capital':'Dhaka','ischecked':'false'},
{'name':'Sri Lanka','capital':'Colombo','ischecked':'false'},
{'name':'Pakistan','capital':'Islamabad','ischecked':'false'}
];
}
</script>
<body ng-app="" ng-controller="myController">
<div ng-repeat="country in countries" class="unchecked" ng-class="{checked:country.ischecked}">
<input type="checkbox" id="{{country.name}}" name="{{country.name}}" ng-model="country.ischecked">{{country.name}}
{{country.ischecked}}
</div>
</body>
Use ischecked as boolean instead of string.
'ischecked':false
PLUNKR
Related
I'd like to edit my checkbox so I get a or an input with type=button instead.
I have for now, properly working :
<label>Afficher</label>
<input type="checkbox" ng-model="isElementVisible">
Simply, with my script-angular.js :
$scope.isElementVisible = false ; //it's working, true when I click on my checkbox.
I haven't been using AngularJS for a looong time cause that's an old project and I don't know how to say to the button that my ng-model needs to change, should I do a function or is there an easier way ?
Thanks in advance to you all :3
You can simply handle it in the html using
ng-click="isElementVisible = !isElementVisible"
angular.module('myApp', [])
.controller('myCtrl', ['$scope', function($scope) {
$scope.isElementVisible = false;
}]);
.hlight {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="isElementVisible = !isElementVisible">Click to toggle isElementVisible</button>
<div ng-class="{'hlight':isElementVisible}">isElementVisible is {{isElementVisible}}</div>
</div>
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>
Could someone help me with this question.
I am trying to understand how can I access the variable "new_name_input" inside one of my functions. The goal it's just to set my variable with the name choosen. I would be glad if someone could explain it to me or/and show me how can I make it.
See code below.
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',['$scope',function($scope){
$scope.names=
[
{nome:'Renan'},
{nome:'Geraldo'}
];
$scope.newNames=
[
{nome:'Fernando'},
{nome:'José'}
];
$scope.transfer=function(novoNome,place){
alert(novoNome.nome);
this.place = novoNome.nome;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div style='border:1px solid black;display:inline;margin:10px 10px 10px 10px'
ng-repeat='name in names'>
<input type='text' ng-model='new_name_input'/>
<div>
<p ng-click='transfer(new_name,new_name_input)' ng-repeat='new_name in newNames'>
{{new_name.nome}}
</p>
</div>
</div>
</body>
When I click on the names written, the names does not get added in the textbox. I am wondering how can I do it without remove the ng-repeat from the code
Not sure I'm following your question completely, but is this what you're attempting to do? Basically, you need a "." in the ng-model in order to have two-way bindings work with primitives. I used ng-init to create a new object to achieve that, but I wonder if you mean to get the new value back into the name object? If so, you can drop the ng-init and just pass the name object into the transfer method instead.
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',['$scope',function($scope){
$scope.names=
[
{nome:'Renan'},
{nome:'Geraldo'}
];
$scope.newNames=
[
{nome:'Fernando'},
{nome:'José'}
];
$scope.transfer=function(novoNome,nameVm){
alert(novoNome.nome);
nameVm.new_name_input= novoNome.nome;
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="MyCtrl">
<div style='border:1px solid black;display:inline;margin:10px 10px 10px 10px'
ng-repeat='name in names' ng-init="nameVm = {}">
<input type='text' ng-model='nameVm.new_name_input'/>
<div>
<p ng-click='transfer(new_name,nameVm)' ng-repeat='new_name in newNames'>
{{new_name.nome}}
</p>
</div>
</div>
</body>
I try to implement html5 drag and drop with angular.
The code is:
<div ondrop="drop(event)"></div>
And in the controller:
$scope.drop = function(e) { console.log('a drop') };
This leads to the error:
Uncaught ReferenceError: drop is not defined
Exchanging 'ondrop' with 'ng-click' makes it work, so there is nothing missing in the controller.
ondrop is a HTML attribute, therefore it expects the given function to be global, as opposed to angular directives such as ng-click which expect the callbacks to be published on the $scope.
You can use non angular events by connecting functions, that fire in that events to your scope. In this case:
ondrop='angular.element(document.getElementById("Id of element with ngController,or ngView(if you use router)")).scope().drop(event)'
Here I modified the drag and drop example from W3Schools:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<style>
#div1, #div2 {
float: left;
width: 100px;
height: 35px;
margin: 10px;
padding: 10px;
border: 1px solid black;
}
</style>
<body ng-app="myApp">
<div data-ng-controller="myCtrl" id="myContrId">
<div id="div1" ondrop='angular.element(document.getElementById("myContrId")).scope().drop(event)' ondragover='angular.element(document.getElementById("myContrId")).scope().allowDrop(event)'>
<img src="https://diethelper.xyz/DHadmin/images/logo2w.png" draggable="true" ondragstart='angular.element(document.getElementById("myContrId")).scope().drag(event);' id="drag1" width="88" height="31">
</div>
<div id="div2" ondrop='angular.element(document.getElementById("myContrId")).scope().drop(event)' ondragover='angular.element(document.getElementById("myContrId")).scope().allowDrop(event)'></div>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.allowDrop = function(ev) {
ev.preventDefault();
}
$scope.drag = function(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
$scope.drop = function(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
});
</script>
</body>
</html>
ng-click is a directive defined by angular itself. ondrop, is as far as I'm aware not part of angular's standard library. You will need to define a new directive in order to get the functionality you want. I would recommend checking out this blog post
http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html
I have tried (guessed) many possible options and searched but I cannot find how to check the created checkboxes when a button is pressed. I know I need to read more and I won't give up but I do want to move on quickly if anyone can help, I want to get to the next part of the app.
Thanks
<div id="divc">
<core-selector target="{{$.myForm}}" itemsSelector="input[type=checkbox]"
selected="{{Index}}" valueattr="value" activateEvent="change">
</core-selector>
<form id="myForm">
<template repeat="{{cItem, Index in carray}}">
<label><input name="{{Index}}" type="checkbox" value="{{Index}}"> {{cItem._Ffield}}</label> <br>
</template>
</form>
</div>
In the script I can move to the next checkbox when the button is pressed
<script>
Polymer('my-element', {
created: function()
{
this.Index = 0;
},
increment: function(e){
//would like to check the checkbox before moving to the next, I thought it would be easy but nothing seems to work.
this.Index++; //move to next
}
});
</script>
I'm not sure if i understand what u want exactly...
Here is a form with dynamicly created checkboxes and a button that checks them ...
I ripped out all other stuff (not needed for this example)
<!doctype html>
<html>
<head>
<script src="/components/platform/platform.js"></script>
<style>
body {
font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
margin: 0;
}
</style>
<link rel="import" href="/components/polymer/polymer.html">
<script>
</script>
</head>
<body fullbleed unresolved>
<my-element>
</my-element>
<polymer-element name="my-element">
<template>
<form id="myForm">
<template repeat="{{cItem in carray}}">
<label><input name="{{Index}}" type="checkbox">{{cItem}}</label> <br>
</template>
<input type="button" on-tap="{{checkAllBoxes}}" value="CHECK">
</form>
</template>
<script> Polymer('my-element', {
created: function()
{
this.carray = ['a','b','c'];
},
checkAllBoxes: function(e){
var c = this.shadowRoot.querySelectorAll('input[type=checkbox]');
c.array().forEach(
function(e,i,a) {e.checked = true;}
);
},
});
</script>
</polymer-element>
</body>
</html>