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>
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>
Html5 dialogs are simple. Shoulda been there 15 years ago!
How to get ng-show working (it doesn't) with dialogs?
<!DOCTYPE html>
<html ng-app="project">
<head>
<meta charset='UTF-8'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('project', [])
.controller('TheController', function ($scope) {
$scope.dialogShowing = false;
$scope.showDialog = function () {
dialogShowing = true;
document.getElementById('theDialog').show();
};
$scope.hideDialog = function () {
dialogShowing = false;
document.getElementById('theDialog').close();
};
});
</script>
</head>
<body ng-controller="TheController">
<div> Hello
<!-- dialog, where it is placed in the source, doesn't take up space -->
<dialog id="theDialog">
<div>
<h3>Simple Angular Html5Dialog</h3>
<hr/>
<p>I am very well, thank you</p>
<button ng-click="hideDialog()">No, thank you</button>
</div>
</dialog>
how are you?
</div>
<button ng-click="showDialog()">^ Click for the answer</button>
</body>
</html>
The only thing I have been able to get working is .open() and .close() on the dialog widget itself, and have to simulate ng-show/hide, above.
Advice?
I'm not sure what browser you are using, but dialog is very much unsupported by most browsers (http://caniuse.com/#search=dialog). If it's a simple modal you're looking to create why not use a div and style it accordingly?
It's perfectly possible. Here's a demo from my blog:
<div style="width: 600px;" id="example">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script type="text/javascript">
var App = angular.module("MyApp", []);
// Make ng-show/hide doesn't work with <dialog>
App.controller('DialogDemo', ['$scope', function ($scope) {
$scope.dialogShowing = false;
$scope.showDialog = function () {
$scope.dialogShowing = true;
$scope.whatHappened = "something happened that needs a dialog";
document.getElementById('theDialog').showModal();
};
$scope.hideDialog = function () {
$scope.dialogShowing = false;
document.getElementById('theDialog').close();
$scope.whatHappened = undefined;
};
}]);
</script>
<div style="align-content: center" ng-app="MyApp" ng-controller="DialogDemo">
(text above button)<br/>
<button ng-click="showDialog()">Click me</button><br/>
(text below button, and above dialog in source)<br/>
<dialog id="theDialog">
<div>
<h3>Ooops</h3>
<hr/>
<div>
<!-- see note above about double-curly-brace -->
{{whatHappened}}
</div>
<hr/>
<button ng-click="hideDialog()">OK</button>
</div>
</dialog>
(text below dialog in source)<br/>
<span style="font-weight: bold" ng-show="dialogShowing">Dialog should now be show (modal style) in the center of the page.</span>
</div>
</div>
I am a beginner in angularjs, i want to know what code should be used if i want to pop up a drop down depending upon the button being clicked.
If i click on India, the drop down corresponding to India should appear and if I click on Pakistan, the drop down corresponding to Pakistan should appear.
This is what I've tried so far :
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<style>
button
{ background-color: #4CAF50;
color: white;
display: inline-block;
text-align: center;
font-size: 16px ;
}
</style>
<body>
<div>
<br/>
<button type = "India" ng-click= "India_dropDown">India </button> <br/> <br/>
<button type = "Pakistan" ng-click= "Pakistan_dropDown">Pakistan </button>
</div>
<div ng-app="myApp" ng-controller="myCtrl">
<select ng-model= "India_dropDown" ng-options= " x for x in names1">
</select>
<select ng-model= "Pakistan_dropDown" ng-options= " y for y in names2">
</select>
</div>
<script>
var app = angular.module('myApp' , [] );
app.controller('myCtrl' , function($scope) {
$scope.names1 = ['Sachin' ,'Dhoni','Virat','Dravid'] ;
$scope.names2 = ['Shoaib' ,'Malik','Irfan','Sarfraz'] ;
});
</script>
</body>
</html>
I have created a fiddler here to demo the solution. Basically I am triggering the mouse down event on the required select box which will pop the box.
Controller
$scope.indiaDropDown = function() {
var dropdown = document.getElementById('indiaselect');
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
}
$scope.pakDropDown = function() {
var dropdown = document.getElementById('pakselect');
var event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
dropdown.dispatchEvent(event);
}
HTML
<select ng-model="India_dropDown" id="indiaselect" ng-options=" x for x in names1">
</select>
<select ng-model="Pakistan_dropDown" id="pakselect" ng-options=" y for y in names2"></select>
<br/>
<button type="India" ng-click="indiaDropDown()">India </button>
<br/>
<button type="Pakistan" ng-click="pakDropDown()">Pakistan </button>
I am not sure if you pop open the dropdowns or just show/hide it. Incase you want to just show/hide the select boxes consider using ng-show/ng-hide. My solution will pop open the dropdown.
Programmatically show or hide each select box using ng-show.
<div ng-show="country === 'Packistan'">
<!-- pakistan select -->
</div>
<div ng-show="country === 'India'">
<!-- India select -->
</div>
Toggle country by what was clicked.
<button id="India" ng-click="toggleCountry($event)">India</button>
<button id="Pakistan" ng-click="toggleCountry($event)">Pakistan</button>
In your controller...
$scope.country = "";
$scope.toggleCountry = function(e) {
$scope.country = e.target.id;
}
Or just set it directly in the ng-click action.
<button id="India" ng-click="country = 'India';">India</button>
<button id="Pakistan" ng-click="country = 'Pakistan';">Pakistan</button>
Maybe like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link href="style.css" rel="stylesheet" />
<script data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-require="angular.js#1.4.x"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div>
<button type="button" ng-click="setCountry(india)">India</button>
<button type="button" ng-click="setCountry(pakistan)">Pakistan </button>
</div>
<select ng-model="country_select" ng-options="x for x in country"></select>
</div>
<script>
var app = angular.module('myApp' , [] );
app.controller('myCtrl' , ['$scope', function($scope) {
$scope.country = [];
$scope.india = ['Sachin' ,'Dhoni','Virat','Dravid'];
$scope.pakistan = ['Shoaib' ,'Malik','Irfan','Sarfraz'];
$scope.setCountry = function(name){
$scope.country = name;
};
}]);
</script>
</body>
</html>
Suppose i have 5 textboxes in a list.I enter text input in the first text box and click send. Now i want the input value entered to be showed in all the other textboxes in the list.
Following is my html code:-
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Plunker</title>
<script src="./scripts/angular.min.js"></script>
<script src="./scripts/app.js"></script>
</head>
<body ng-app="chatApp">
<div ng-controller="chatController">
<ul>
<li ng-repeat="chat in chats">
<input type="text"/>
<button ng-click="sendChat()">Send</button>
<button ng-click="deleteChat($index)">Delete</button>
</li>
</ul>
<button ng-click="addChat()">Click me to add</button>
</div>
</body>
</html>
Following is my angular code:-
var app=angular.module('chatApp',[]);
app.controller('chatController',['$scope',function($scope){
$scope.chats=[];
$scope.addChat = function() {
if($scope.chats.length<10)
{
$scope.chats.push({name:''});
}
}
$scope.deleteChat=function(index){
$scope.chats.splice(index,1);
}
$scope.sendChat=function(data){
}
}]);
I have a sendChat function where i was thinking to put the code.
Add model in your input field
<input type="text" ng-model="chat.msg"/>
Then pass the selected msg
<button ng-click="sendChat(chat)">Send</button>
Then assign msg in other textboxes
$scope.sendChat = function(data) {
$scope.chats.map(function(x) {
x.msg = data.msg;
})
}
DEMO
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