I want to create function (in angularjs controller) which add particular class to the parent div of the empty input when clicking on the button. And remove that class when i type something in the input.
I have a working example here: http://jsfiddle.net/fUdLv/
HTML:
<div ng-app="authorization">
<div ng-controller="authCtrl as auth">
<div ng-class="{'error':auth.needEmail}">
<input type="text" ng-model="auth.email" ng-keypress="auth.clearEmail()">
</div>
<div ng-class="{'error':auth.needPassword}">
<input type="password" ng-model="auth.password" ng-keypress="auth.clearPassword()">
</div>
<div>
<button ng-click="auth.signin()">Sign in</button>
</div>
</div>
</div>
Javascript:
angular.module('authorization', [])
.controller('authCtrl', function() {
this.needEmail = false;
this.needPassword = false;
this.signin = function pay() {
if (!this.email){
this.needEmail = true;
}
if (!this.password){
this.needPassword = true;
}
};
this.clearEmail = function(){
this.needEmail = false;
}
this.clearPassword = function(){
this.needPassword = false;
}
});
But i'm sure it is very bad code, because i have a particular function for working with particular input. How can i generalize this function for working on every input (for example, if i would have three or four inputs it is not very smart solution to create function for each of them)
How about use <form> and FormController to control state?
You probably need to read this guide from official site.
Related
I have to change cursor icon whenever dragging an item to nondraggable and draggable zone.How can i achieve this in angular.
so first i have tried to set predefined cursor "grabbing" while dragging but still not able to set.
The default looks like in the screenshot (pointer with a small rectangle below), but I need to change that to a custom image or grabbing
Here is the code link
https://stackblitz.com/edit/hello-angular-6-wsyygt?file=src%2Fapp%2Fapp.component.html
CodeSnippet:
<div>
<div class="drag1" *ngFor="let vehicle of canBeCopy" draggable="true" (dragstart)="onDragStart(vehicle,$event)" >
<p>{{vehicle}}</p>
</div>
</div>
<hr>
<div>
<p>Drop Area</p>
<div class="availablevehicle" (dragover)="allowDrop($event)"(drop)="onDrop($event)">
<div *ngFor="let vehicle of vehicles" >
<p>{{vehicle}}</p>
</div>
</div>
<div>
.ts file
onDrop(ev) {
let index = this.vehicles.findIndex((v)=>v==this.vehicle);
if(index<0){
this.vehicles.push(this.vehicle);
}
ev.target.style.cursor = "pointer"
}
onDragStart(vehicle,event){
this.vehicle = vehicle;
event.target.style.cursor = "grabbing"
console.log("vent",event);
}
allowDrop(ev) {
ev.dataTransfer.dropEffect = "copy";
ev.target.style.cursor = "grabbing"
ev.preventDefault();
}
any code snippet solution appreciable
Thanks
This may not be exactly what you're looking for, but check out adding HostBinding/HostListener to a directive.
in a directive, you can create a HostBinding:
#HostBinding('style.cursor') private cursor = 'default';
Then you can target dragover events via a HostListener
#HostListener('dragover', ['$event']) onDragOver(evt) {
evt.preventDefault();
evt.stopPropagation();
this.cursor = 'pointer' // any custom cursor would be assigned here
}
Here's a good reference https://alligator.io/angular/hostbinding-hostlistener/
Happy Coding!
I'm trying to generate divs dynamically (by input) inside another div created dynamically by the user. The problem is that I'm able to generate both divs dynamically, buy the child divs are not going to create any divs by input.
The second one id="usersvmaddnewdivsN" is not going to generate any divs. Can you help me please? Thank you.
(check jsfiddle to understand better)
https://jsfiddle.net/rqebwm59/3/
$(function() {
$(".instancesN").change(function() {
var value = $(this).val();
$(".instancesNContainer").empty();
for (var i = 1; i < value; i++) {
var block = $("<div>", {
class: "block"
});
$(block).append($("div.instancesNSpecifics").html());
$(".instancesNContainer").prepend(block);
}
});
});
$(function() {
$("#usersvmaddnewdivsN").change(function() {
var value = $(this).val();
$(".usersvmaddnewdivsNContainer").empty();
for (var i = 1; i < value; i++) {
var block = $("<div>", {
class: "block"
});
$(block).append($("div.usersvmaddnewdivsNSpecifics").html());
$(".usersvmaddnewdivsNContainer").append(block);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='number' min="1" oninput="validity.valid||(value='1');" value="1" name='instancesN[]' placeholder="Instances #" class='instancesN' class="form-control" />
<div class="instancesNContainer"></div>
<div class='instancesNSpecifics'>
<input type='number' min="1" oninput="validity.valid||(value='');" name='usersvmaddnewdivsN[]' id='usersvmaddnewdivsN' placeholder="Add new Users" class="form-control" />
</div>
<div class="usersvmaddnewdivsNContainer"></div>
<div class='usersvmaddnewdivsNSpecifics'>
<div class="form-row">
<div class="col">
<input type="text" class="form-control" name='usernamevmN[]' id="usernamevmN" placeholder="VM-Username" />
</div>
I think jQuery events delegation is what you are looking for. You may want to modify second 'change' binding to something like:
$(".instancesNContainer").on('change', '.usersvmaddnewdivsN', function() { //etc.
So every dynamically created .usersvmaddnewdivsN inside its static parent .instancesNContainer will get change event automatically bound.
I am creating a simple program in Electron. The program has the option of running several separate functions based on what the user needs. All functions require a file to be inputted and a save location for the resulting output file. This is done using a form. I would like to have it that once the user inputs the locations it is displayed in a div beside the input buttons. Is there a way to do this within electron?
code:
<!-- File Input Section -->
<div class = "individual-input-container-2">
<div class="input-container" >
<div class = "inner-input-container">
<input type="file" id="file-input" class = "input-top" >
<p class = "input-desc-file">File</p>
</div>
<div>
</div>
</div>
<div class="input-container">
<div class = "inner-input-container">
<input type="file" webkitdirectory id="save-input"class = "input-bottom">
<p class = "input-desc-save">Save Location</p>
</div>
</div>
</div>
Here is photo of what I am building
I did something similar a while back and mine looks like this:
HTML:
<button id="choosePath">Choose Folder</button>
JS:
const { dialog } = require('electron').remote;
document.querySelector('#choosePath').addEventListener('click', (e) => {
dialog.showOpenDialog({
title:"Select Directory",
properties: ["openDirectory"]
}, (folderPaths) => {
// folderPaths is an array that contains all the selected paths
if(folderPaths === undefined){
return;
} else {
// Do something with the folderPaths variable
}
});
});
It's basically just an ordinary button opening a Dialog Window where you can select a path.
If you did select one the full Path is passed to a callback function where you can use it to do whatever you have to do with it.
You can try Electron's dialog.showSaveDialog ()/dialog.showSaveDialogSync () functions. They return a Promise<string> or a string representing the file/folder which was selected by the user, respectively. Then you can easily display in your <div>.
I am new to AngularJS and have some trouble understanding the concept of scope in Angular. I have read some posts on stackoverflow as well as online articles, which advise me to create a custom directive to create an isolate scope, but I am getting nowhere...
As for the project I'm working on, I am trying to make a button that when clicked, will trigger a textarea. However, because of ng-repeat, the textarea is triggered for all buttons while I click only one.
My .js file:
angular.module('myApp')
.controller('myCtrl', function ($scope, Question) {
scope.visible = false;
scope.toggle = function() {
scope.visible = !scope.visible;
};
.directive("myDirective", function () {
return {
scope: {
ngClick: '&',
ngShow: '&'
}
}
});
Here is my HTML file:
<ul>
<li ng-repeat="object in objectList">
<button type="text" myDirective ng-click="toggle()">Click</button>
<textarea myDirective ng-show="visible"></textarea>
</li>
</ul>
Angular is creating child (NOT isolated) scope when ng-repeating, try this out, when you ng-init a variable, it is only visible within that repeat div.
<div ng-repeat="i in [0,1,2,3,4,5,6,7,8,9]" ng-init="visible=false">
<button ng-click="visible=!visible">Toggle</button>
<h1 ng-show="visible">look at me!</h1>
</div>
Plunker
There is no need to use a directive. You need to use object in the foreach to refer each item in the loop.
Add visible to each object in objectList:
$scope.objectList = [
{ visible: false },
{ visible: false },
{ visible: false }
];
Then the toggle button will need to pass the object to toggle:
$scope.toggle = function (object) {
object.visible = !object.visible;
};
The ng-show will need to check object.visible and ng-click will need to pass the object:
<button type="text" ng-click="toggle(object)">Click</button>
<textarea ng-show="object.visible"></textarea>
Plunkr
When using ng-repeat what is the best way to be able to edit content?
In my ideal situation the added birthday would be a hyperlink, when this is tapped it will show an edit form - just the same as the current add form with an update button.
Live Preview (Plunker)
HTML:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script>
document.write('<base href="' + document.location + '" />');
</script>
<script src="app.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.0/css/bootstrap-combined.min.css"
rel="stylesheet">
</head>
<body ng-app="birthdayToDo" ng-controller="main">
<div id="wrap">
<!-- Begin page content -->
<div class="container">
<div class="page-header">
<h1>Birthday Reminders</h1>
</div>
<ul ng-repeat="bday in bdays">
<li>{{bday.name}} | {{bday.date}}</li>
</ul>
<form ng-show="visible" ng-submit="newBirthday()">
<label>Name:</label>
<input type="text" ng-model="bdayname" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bdaydate" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
</form>
</div>
<div id="push"></div>
</div>
<div id="footer">
<div class="container">
<a class="btn" ng-click="visible = true"><i class="icon-plus"></i>Add</a>
</div>
</div>
</body>
App.js:
var app = angular.module('birthdayToDo', []);
app.controller('main', function($scope){
// Start as not visible but when button is tapped it will show as true
$scope.visible = false;
// Create the array to hold the list of Birthdays
$scope.bdays = [];
// Create the function to push the data into the "bdays" array
$scope.newBirthday = function(){
$scope.bdays.push({name:$scope.bdayname, date:$scope.bdaydate});
$scope.bdayname = '';
$scope.bdaydate = '';
};
});
You should put the form inside each node and use ng-show and ng-hide to enable and disable editing, respectively. Something like this:
<li>
<span ng-hide="editing" ng-click="editing = true">{{bday.name}} | {{bday.date}}</span>
<form ng-show="editing" ng-submit="editing = false">
<label>Name:</label>
<input type="text" ng-model="bday.name" placeholder="Name" ng-required/>
<label>Date:</label>
<input type="date" ng-model="bday.date" placeholder="Date" ng-required/>
<br/>
<button class="btn" type="submit">Save</button>
</form>
</li>
The key points here are:
I've changed controls ng-model to the local scope
Added ng-show to form so we can show it while editing
Added a span with a ng-hide to hide the content while editing
Added a ng-click, that could be in any other element, that toggles editing to true
Changed ng-submit to toggle editing to false
Here is your updated Plunker.
I was looking for a inline editing solution and I found a plunker that seemed promising, but it didn't work for me out of the box. After some tinkering with the code I got it working. Kudos to the person who made the initial effort to code this piece.
The example is available here http://plnkr.co/edit/EsW7mV?p=preview
Here goes the code:
app.controller('MainCtrl', function($scope) {
$scope.updateTodo = function(indx) {
console.log(indx);
};
$scope.cancelEdit = function(value) {
console.log('Canceled editing', value);
};
$scope.todos = [
{id:123, title: 'Lord of the things'},
{id:321, title: 'Hoovering heights'},
{id:231, title: 'Watership brown'}
];
});
// On esc event
app.directive('onEsc', function() {
return function(scope, elm, attr) {
elm.bind('keydown', function(e) {
if (e.keyCode === 27) {
scope.$apply(attr.onEsc);
}
});
};
});
// On enter event
app.directive('onEnter', function() {
return function(scope, elm, attr) {
elm.bind('keypress', function(e) {
if (e.keyCode === 13) {
scope.$apply(attr.onEnter);
}
});
};
});
// Inline edit directive
app.directive('inlineEdit', function($timeout) {
return {
scope: {
model: '=inlineEdit',
handleSave: '&onSave',
handleCancel: '&onCancel'
},
link: function(scope, elm, attr) {
var previousValue;
scope.edit = function() {
scope.editMode = true;
previousValue = scope.model;
$timeout(function() {
elm.find('input')[0].focus();
}, 0, false);
};
scope.save = function() {
scope.editMode = false;
scope.handleSave({value: scope.model});
};
scope.cancel = function() {
scope.editMode = false;
scope.model = previousValue;
scope.handleCancel({value: scope.model});
};
},
templateUrl: 'inline-edit.html'
};
});
Directive template:
<div>
<input type="text" on-enter="save()" on-esc="cancel()" ng-model="model" ng-show="editMode">
<button ng-click="cancel()" ng-show="editMode">cancel</button>
<button ng-click="save()" ng-show="editMode">save</button>
<span ng-mouseenter="showEdit = true" ng-mouseleave="showEdit = false">
<span ng-hide="editMode" ng-click="edit()">{{model}}</span>
<a ng-show="showEdit" ng-click="edit()">edit</a>
</span>
</div>
To use it just add water:
<div ng-repeat="todo in todos"
inline-edit="todo.title"
on-save="updateTodo($index)"
on-cancel="cancelEdit(todo.title)"></div>
UPDATE:
Another option is to use the readymade Xeditable for AngularJS:
http://vitalets.github.io/angular-xeditable/
I've modified your plunker to get it working via angular-xeditable:
http://plnkr.co/edit/xUDrOS?p=preview
It is common solution for inline editing - you creale hyperlinks with editable-text directive
that toggles into <input type="text"> tag:
<a href="#" editable-text="bday.name" ng-click="myform.$show()" e-placeholder="Name">
{{bday.name || 'empty'}}
</a>
For date I used editable-date directive that toggles into html5 <input type="date">.
Since this is a common piece of functionality it's a good idea to write a directive for this. In fact, someone already did that and open sourced it. I used editablespan library in one of my projects and it worked perfectly, highly recommended.