I am new to Angularjs. I've tried a example in here.
file index.html:
<div ng-repeat="data in ctl.dataList">
<div class="col-md-6">
<textarea type="text" ng-mouseover="ctl.mouseOverFunc()" ng-mouseleave="ctl.mouseLeaveFunc()">{{data.value}}</textarea>
<button ng-show="ctl.showCloseBtn">X</button>
</div>
</div>
file app.js:
app.controller('FocusController', function() {
this.showCloseBtn = false;
this.dataList = [{
value: "one"
}, {
value: "two"
}];
this.mouseOverFunc = function() {
this.showCloseBtn = true;
};
this.mouseLeaveFunc = function() {
this.showCloseBtn = false;
};
});
I want to show close button when mouse overed every textarea like facebook chat in this picture. But my issues is when mouse over one of textarea then all X button was showed.
How do i assign dynamic controller to every textarea or how to do like facebook chat ?
Thanks for your help
You can do with CSS as well as AngularJS. I suggest you to do with CSS which is Simple. And Do your ng-click on the button.
This Plunker Demo is using with CSS and added ng-click there. Please check the styles and classes added.
Styles
<style>
.field:hover .btn-close {
display:block;
}
.btn-close {
display:none;
}
</style>
HTML
<div ng-repeat="data in ctl.dataList">
<div class="col-md-7 field">
<textarea></textarea>
<button ng-click="doSomething()" class="btn-close">X</button>
</div>
</div>
This Plunker Demo is with AngilarJS as explained in the other answer by New Dev.
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea></textarea>
<button ng-click="doSomething()" ng-show="data.showX">X</button>
</div>
Typically, it would be best to create a directive for this functionality and encapsulate all the logic of clicking the "x" button, but for simplicity you could also leverage the child scope created by ng-repeat, and do the following:
<div ng-repeat="data in ctl.dataList">
<div ng-mouseover="data.showX = true"
ng-mouseleave="data.showX = false">
<textarea type="text"></textarea>
<button ng-show="data.showX" ng-click="ctl.close(data)">X</button>
</div>
</div>
ng-repeat="item in items" creates a child scope for each item, so you can set values on the child scope.
Here's your modified plunker
EDIT:
As suggested in the comments, if you have nothing more complex than showing or hiding the button, definitely CSS approach is the simplest way to go. Use the above example then as an illustration for how scopes work.
Related
Here Iam facing issue with toggling the div containers. if I click on video button, other divs should close, only if open. because of toggling, if it close already, its opening on click of particular btn.can you help me?
html:
<div class="row" *ngFor="let doctor of doctordata;let i=index">
<button appointmentToggle(doctor,'video',i)">video</button>
<button appointmentToggle(doctor,'clinic',i)">In-clinic</button>
<div class="row" id="clinicShow{{i}}">
<button (click)="clinicdetails(i)">clinicName</button>
</div>
<div class="col-lg-12 col-sm-12" id="videoappointmentShow{{i}}">
videocalendertimeslot
<div>
<div class="col-lg-12 col-sm-12" id="inclinicappointmentShow{{i}}">
Incliniccalendertimeslot
<div>
</div>
component.ts
index: any;
appointmentToggle(doctor,type,index){
if(type == 'video'){
$("#appointmentShow"+index).toggle();
//here i need to check condition whether its already opened or not, if open, then it should toggle.
$("#clinicShow"+index).toggle();
}
if(type == 'clinic'){
if(this.index==undefined){
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
this.index=index;
}else if(this.index == index){
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
index = undefined;
}else{
$("#clinicShow"+this.index).toggle();
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
this.index= index;
}
}
clinicdetails(index){
$("#clinicShow"+index).toggle();
$("#appointmentShow"+index).toggle();
}
There are going to be a lot of ways to do this. I'd probably create an array of boolean values to show/hide stuff.
<div class="row" *ngFor="let doctor of doctordata;let i=index">
<button appointmentToggle(doctor,'video',i)">video</button>
<button appointmentToggle(doctor,'clinic',i)">In-clinic</button>
<div class="row" *ngIf="hideVideo[i]">
<button (click)="clinicdetails(i)">clinicName</button>
</div>
<div class="col-lg-12 col-sm-12" *ngIf="hideVideo[i]">
videocalendertimeslot
<div>
<div class="col-lg-12 col-sm-12" *ngIf="hideClinic[i]">
Incliniccalendertimeslot
<div>
</div>
Then you're Component file can have a boolean array:
hideVideo: boolean[] = [];
hideClinic: boolean[] = []
Whenever doctordata is initialized also initialize the array:
doctordata.forEach(() => { this.hideVideo.push(false);this.hideClinic.push(false); });
You're appointment toggle can be something like this:
appointmentToggle(doctor,type,index){
if(type == 'video'){
this.hideVideo[index] = !this.hideVideo[index];
this.hideClinic[index] = !this.hideClinic[index];
}
}
clinicdetails(index){
this.hideVideo[index] = !this.hideVideo[index];
this.hideClinic[index] = !this.hideClinic[index];
}
This is incredibly rough and untested.
Edit: Here is working code. This version is less rough and untested:
https://stackblitz.com/edit/angular-ivy-xtz8xv?file=src%2Fapp%2Fapp.component.ts
I used the same concept that I used above. However, I think the code would be more ideal if you could introspect your doctordata objects to determine if it should be displayed or not instead of keeping a second array. However, there is also a good argument about not letting display specific logic clutter up your data model objects.
It looks like your logic would be simpler if you use show() and hide() instead.
Especially because hiding a hidden element is okay and has no effect...
Look at: jQuery Effects - Hide and Show
If the first thing you do is hiding the old index (if any) you only need to show the new...
In the jquery when showing a div and hiding it. I think you don't need an if ... Else condition
Try this code:
$(".btn).click(function(){
$("div").toggle();
});
Once that .btn is click div will show and if u want to hide it just click the button again
I also try to combine javascript and jquery before but it didn't work out well.
<script src = "https://code.jquery.com/jquery-3.6.0.min.js"></script>
Just add this to your header and you are good to go and it's much easy? Hope this works for you
I have 3 paper-toggle-buttons that I would like to have disabled until I click an "edit" button (makes sense to do that).
I have cobbled this together in a long-winded form, however I wanted to know if there was a way in PolymerJS that you could use either the this.$.ID-NAME or the this.$$('CLASS-NAME') to select all of the paper-toggle-buttons, assuming that I gave them all the same ID and CLASS names (bad practise to duplicate ID's I know).
Any help is appreciated. I know that it's currently working, but I just want to know if there's an easier way.
I am currently working with the following (the toggle will occur when clicking a button with on-click event "editMode"):
HTML
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Active User</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isActive}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Operator</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isOperator}}" disabled></paper-toggle-button>
</div>
<div class="detail info horizontal layout">
<div class="bodyHeaderText flex">Manager</div>
<paper-toggle-button class="toggle" id="toggle" checked$="{{isManager}}" disabled></paper-toggle-button>
</div>
PolymerJS
editMode : function() {
toggle1 = this.$.toggle1;
toggle2 = this.$.toggle2;
toggle3 = this.$.toggle3;
if( EditDiv.style['display'] == 'none' )
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
else
{
toggle1.toggleAttribute('disabled');
toggle2.toggleAttribute('disabled');
toggle3.toggleAttribute('disabled');
}
}
You could take a look to Polymer DOM API, there're a lof of functions to interact with the DOM. I think you're looking for Polymer.dom(this.root).querySelectorAll('.toggle')
$$ returns the first node in the local DOM that matches selector.
you can do
Array
.from(Polymer.dom(this.root).querySelectorAll('.foo'))
.forEach($0 => /* do something */)
;
Then, just a note, your snippet doesn't make much sense because you are performing the same operation in if and else statements:
if(expression) {
toggle1.toggleAttribute('disabled')
} else {
toggle1.toggleAttribute('disabled')
}
// is equal to:
toggle1.toggleAttribute('disabled')
your code could definitely look like:
{
editMode() {
return [
this.$.toggle1,
this.$.toggle2,
this.$.toggle3
]
.forEach($0 => $0.toggleAttribute('disabled'))
}
}
I have a small piece of code, which I would like to extend with in line editting possibilities:
HTML:
<h1>Schedule <label ng-click="modifyText(index)">{{th.schedules[index].label}} </label>
</h1>
JS:
$scope.modifyText = function(index) {
this.th.schedules[index].label = 'modifiedtext';
};
Hence I would like to be able to click {{th.schedules[index].label}}, modify it inline to the string: "modifiedtext", and save it.
How can I do that?
Thank you.
In order to edit a label inline, you would probably have to use the contentEditable attribute since it isn't directly an editable element. If you give it an ng-model changing that data could be easier but you will still have to make a UI for actually editing it.
Instead I made an example using a text input and some simple styling to make it seem as though it isn't a text input when it isn't focused
http://jsfiddle.net/yrakrj48/
//-- HTML
<body ng-app="TestApp">
<div ng-controller="TestController">
<input ng-class="editing ? 'hasBorder' : 'noBorder'" type="text" ng-model="myLabel" ng-focus="editing = true" />
<button ng-if="editing" ng-click="saveEdit()">done</button>
</div>
</body>
//-- JS
var app = angular.module('TestApp',[]);
app.controller('TestController', function($scope) {
$scope.myLabel = 'this is a label';
$scope.saveEdit = function() {
$scope.editing = false;
};
});
//-- CSS
.hasBorder {
border:1px solid #666;
}
.noBorder {
border:none;
}
You should look into directives because creating one would be easy and I am sure one already exists somewhere out on github
I think you use. contenteditable=true
<div contenteditable=true>
I am Editable
</div>
I got some code here, what I want to do is when I click the button I change the checkbox value and at the same time change the color of the button.
(check=red,uncheck=black for example)
I think it is easier to do it with jquery. My idea is to get the index of which button is clicked. change the value of the checkbox with the same index and the button color.
But I just cannot figure out how to select the button and the checkbox.
<div id="allcolrepeat">
<div style="width:200px; float:left; margin:5px;" ng-repeat="col in allColumns">
<input class="colCheckbox" type="checkbox" ng-change="changeCheck(col.displayName)" ng-model="checkvalue[col.displayName]">
<button>{{col.displayName}}</button>
</div>
</div>
Any help will be appreciated. Thanks.
You can use ngClass directive
The ngClass directive allows you to dynamically set CSS classes on an HTML element by databinding an expression that represents all classes to be added.
Code
<button ng-class="checkvalue[col.displayName] == true ? 'red' : 'black'">{{col.displayName}}</button>
Another way of using it is
ng-class="{'red': checkvalue[col.displayName], 'black': !checkvalue[col.displayName]}">
Note: Declare red and black css class
If I understood well here is a simple JSFiddle
You can do it with many ways, you can use ngClass or ngStyle (second one in the example) to change CSS styling, then you need only to assign the scope variable to the ng-model to change the checkbox value.
HTML:
<div ng-app="myApp" ng-controller="myCtrl">
<div id="allcolrepeat">
<div style="width:200px; float:left; margin:5px;" ng-repeat="col in allColumns">
<input class="colCheckbox" type="checkbox" ng-model="col.displayName">
<button ng-style="{'background-color': color}" ng-click="col.displayName = 'CHANGED'; color = 'red'">{{col.displayName}}</button>
</div>
</div>
</div>
JS:
angular.module('myApp', [])
.controller('myCtrl', ['$scope', '$filter', function ($scope, $filter) {
$scope.allColumns = [{displayName: 'hello'}, {displayName: 'world'}];
$scope.color = 'transparent';
}]);
Here I'm using ng-style to change the button color :
ng-style="{background : status[$index] ? 'red' : 'blue'}"
But you can also use :
ng-class="status[$index] === true ? 'red' : 'blue'"
function Main($scope) {
$scope.allColumns = [{displayName : "1"},{displayName : "2"},{displayName : "3"},{displayName : "4"},{displayName : "5"},{displayName : "6"},{displayName : "7"}]
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="Main" id="allcolrepeat">
<div style="width:200px; float:left; margin:5px;" ng-repeat="col in allColumns track by $index">
<label>{{col.displayName}}</label>
<input ng-model="status[$index]" type="checkbox">
<button ng-style="{background : status[$index] ? 'red' : 'blue'}" ng-click="status[$index] = !status[$index]">OK</button>
</div>
</div>
As was mentioned in other answers it is better to use ng-style or ng-class for styling purposes.
But question was made and peoples from google-search will come to see how to get index with jQuery... So inside ng-repeat you can use '$index' (ngRepeat documentation) variable so you can use it as data attribute or whatever you want. In your particular case you can make
<div ng-repeat="item in items">
<button data-index={{$index}}>{{item}}</button>
</div>
And with jQuery make $('button').on('click', function() { $(this}.data('index') });
I have the following template:
<script type="text/html" id="testTemplate">
<div class="itemName">Hello World</div>
<div class="itemDescription">This is a template that pops up</div>
</script>
I'm calling it in an onClick event like this:
$("<div/>", {
class: "itemView",
id: name,
"data-bind": "template: { name: 'testTemplate' }"
}).appendTo("body").draggable();
When I click the button to view the item, the div pops up but it's empty. The HTML is just an empty DIV like this:
<div class="itemView" id="Item1" data-bind="template: { name: 'testTemplate' } "></div>
What am I missing?
update I have greatly simplified this question
I think you would need to call ko.applyBindings() again. But the usual approach in Knockout is to put the div in your HTML and use the visible binding to control whether the div is rendered.
Personally this is not how I would go about this sort of functionality.
I would have the div already on the page but hidden.
CSS
.itemView{ display: none; }
.show{ display: block; }
HTML
<div class="itemView" id="Item1" data-bind="with: myObject, css: { 'show': (myObject() !== null) }">
<div class="itemName">Hello World</div>
<div class="itemDescription">This is a template that pops up</div>
</div>
Then when you raise the click event, populate the myObject object with the selected object. Knockout will take care of everything.