Here is the Html displaying only one icon now, but what I want is that whenever that edit icon is being clicked it changes to save icon immediately.
Below is the html:
<td style="padding:5px!important;">
<i class="fa fa-edit" ng-click="updateEmp()">
</td>
And down below is the JS file, is there any way to add the html bind to the JS File?
JS Code:
$scope.updateEmp = function (){
$scope.isReadonly = false;
console.log("update Employee");
}
You can use ng-class and toggle the class on click as follows.
ng-class="{'fa fa-save' : toggle, 'fa fa-edit' : !toggle}"
DEMO
var myApp = angular.module('myApp',[]);
myApp.controller('MyCtrl',function($scope){
$scope.updateEmp = function (){
$scope.toggle = !$scope.toggle;
}
});
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyCtrl">
<h1 style="padding:5px!important;">
<i ng-class="{'fa fa-save' : toggle, 'fa fa-edit' : !toggle}" ng-click="updateEmp()"></i>
</h1>
</div>
Related
I'm trying to change an existing element on click but I'm struggling to find the logic (very new to this)
I'm trying to switch the below span innerHTM on click. I have "minus" when the filter is not click and I want to add a plus when it is active, see below:
<section class="section-center" id="products-filter">
<div class="products">
<h1>SHOP THE <br />FLAVOURS</h1>
</div>
<button class="toggle-filter" id="toggle-category-filters">
filter
<span id="filter-btn-span"><i class="far fa-minus-square"></i></span>
</button>
</section>
JS:
const toggleFilterBt = document.getElementById('toggle-category-filters');
const categoriesHolder = document.getElementById('categories-holder');
const filterText = document.getElementById('filter-btn-span');
toggleFilterBt.addEventListener('click', () => {
categoriesHolder.classList.toggle('categories-show');
filterText.innerHTML = '<i class="far fa-plus-square"></i>';
});
When clicked the button does change to the plus sign, but how do I make it go back to minus when the button is clicked again?
You can check element classList
toggleFilterBt.addEventListener('click', () => {
categoriesHolder.classList.toggle('categories-show');
filterText.innerHTML = categoriesHolder.classList.contains('categories-show') ? '<i class="far fa-plus-square"></i>' : '<i class="far fa-minus-square"></i>';
});
$(".filter-btn-span").html('<i class="...."></i>');
is how i did it with jQuery (you put it in your event listener) and fill the i class with the one you want)
Add an id to your icon.
Get the icon element by id.
Add and remove between icon classes by checking that icon's class.
Here is the working example:
const toggleFilterBt = document.getElementById('toggle-category-filters');
const toggleIcon = document.getElementById('toggleIcon');
toggleFilterBt.addEventListener('click', () => {
if (toggleIcon.classList.contains('fa-minus-square')) {
toggleIcon.classList.remove('fa-minus-square');
toggleIcon.classList.add('fa-plus-square');
} else {
toggleIcon.classList.remove('fa-plus-square');
toggleIcon.classList.add('fa-minus-square');
}
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<section class="section-center" id="products-filter">
<div class="products">
<h1>SHOP THE <br />FLAVOURS</h1>
</div>
<button class="toggle-filter" id="toggle-category-filters">
filter
<span id="filter-btn-span"><i class="far fa-minus-square" id="toggleIcon"></i></span>
</button>
</section>
If been working on this form, that can change the name and mail of the item.
But when I looked at this link https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md#services , I saw I made some mistakes in the style but now it doesn't work anymore.
I actually really don't know why. It shows the {{vm.name}} and {{vm.email}} but not the name, also It doesn't hide the input and the buttons who show up when you click on the edit button.
this is the link from plunker https://embed.plnkr.co/yqUsSkwNBPBfOQS5jm5l/ .
angular
.module("form",[])
.controller("LocationFormCtrl", LocationFormCtrl);
function LocationFormCtrl(){
var vm = this;
vm.name = 'henk';
vm.mail = 'gmail';
vm.editorEnabled = false;
var service = {
name: name,
mail : mail,
enableEditor : enableEditor,
editorEnabled: editorEnabled,
disableEditor: disableEditor,
save: save
};
return service;
function enableEditor(){
vm.editorEnabled = true;
vm.editName = vm.name;
vm.editMail = vm.email;
}
function save(){
vm.name = vm.editName;
vm.email = vm.editMail;
disableEditor();
}
function disableEditor(){
vm.editorEnabled = false;
}
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="form" ng-controller="LocationFormCtrl">
<div ng-hide="editorEnabled">
{{ vm.name }}
{{ vm.email }}
<div ng-click="enableEditor()" style="border-radius:50%; background-color:black; height:35px; width:35px;">
<i class="fa fa-pencil-square-o" aria-hidden="true" style="color:white;margin-left:11px; margin-top:10px;"></i>
</div>
</div>
<div ng-show="editorEnabled">
<label>Name:</label>
<input type="text" ng-model="vm.editName" ng-show="editorEnabled">
<br><br>
<label>Email:</label>
<input type="text" ng-model="vm.editMail" ng-show="editorEnabled">
<div ng-click="save()" style="border-radius:50%; background-color:black; height:35px;width:35px;" >
<i class="fa fa-floppy-o" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i>
</div>
<div ng-click="disableEditor()" style="border-radius:50%; background-color:black;height:35px; width:35px;">
<i class="fa fa-ban" aria-hidden="true" style="color:white; margin-left:11px; margin-top:10px;"></i>
</div>
</div>
</body>
</html>
its because the reference was taken of controller in ng-controller as you can see,
its john papa Structure.
For more information you can check.
https://github.com/johnpapa/angular-styleguide
Either you use this syntax of angular controller to avoid $scope, or just use $scope.
I corrected your plunker, you have to use as syntax in html view and bind all data to this object in controller.
Please notice below points in plunker :
ng-controller="LocationFormCtrl as vm"
In html bind everything to vm, like ng-click="vm.save()".
In controller bind everything to this, or its alias.. like vm.enableEditor = function (){/\\
and If you want to do it with $scope way, then see this $sope Plunker
I'm having some trouble triggering popover when clicking a Font Awesome icon which is created dynamically.
index.ejs
<!-- Template for Snazzy Window -->
<script id="marker-content-template" type="text/x-handlebars-template">
<div class="custom-img" style="background-image: url({{{bgImg}}})"></div>
<section class="custom-content">
<h1 class="custom-header">
{{title}} <i class="fa fa-question-circle" data-placement="right" data-toggle="popover" data-container="body" data-content="And here's some amazing content. It's very engaging. Right?"></i>
<small>{{governance}}</small>
</h1>
<div class="custom-body">{{{body}}}</div>
</section>
</script>
<script type="text/javascript>
$(function() {
var template = Handlebars.compile($('#marker-content-template').html());
});
</script>
I've tried various ways including
$(document).on('click', '.fa', function(){
$('[data-toggle="popover"]').popover('toggle');
});
This doesn't work, and now I'm thinking does it have something to do with the Handlebar template?
How can I approach this?
As you run the
$(document).on('click', '.fa', function(){
$('[data-toggle="popover"]').popover('toggle');
});
, handlebar created the element but hasn't added it to the DOM.
So in your code
// 1. Create the element from template with handlebar
var template = Handlebars.compile($('#marker-content-template').html());
// 2. Add the element to the DOM
document.getElementById('#yourTargetContainerId').innerHTML = template;
// 3. add the eventlistener to the elements
$(document).on('click', '.fa', function(){
$('[data-toggle="popover"]').popover('toggle');
});
Using the x-editable dependency, I would like to make a different element editable when I click on an underlying image element.
<h4>Angular-xeditable Text (Bootstrap 3)</h4>
<div ng-app="app" ng-controller="Ctrl">
<h3 class="m-t-lg m-b-sm inline-block" id="line{{lineId}}" editable-text="headingLineContent.someText">{{ headingLineContent }}</h3><br>
<i class="fa fa-pencil pencil m-l-sm" ng-click="">{{ myImage }}</i>
</div>
Here is the JS:
var app = angular.module("app", ["xeditable"]);
app.run(function(editableOptions) {
editableOptions.theme = 'bs3';
});
app.controller('Ctrl', function($scope) {
$scope.headingLineContent = 'Some Text';
$scope.myImage = 'MyImage.jpg';
});
And here is the fiddle: http://jsfiddle.net/emporio/h1zsw5nu/4/
So basically when I click the underlying element, the text above should become editable.
Read the "Trigger Manually" article from here: http://vitalets.github.io/angular-xeditable/#text-btn
Working fiddle: http://jsfiddle.net/koljada/h1zsw5nu/5/
<div ng-app="app" ng-controller="Ctrl">
<p>
<h3 class="m-t-lg m-b-sm inline-block" id="line{{lineId}}" editable-text="headingLineContent" e-form="textBtnForm">{{ headingLineContent }}</h3>
</p>
<p>
<i class="fa fa-pencil pencil m-l-sm" ng-click="">{{ myImage }}</i>
</p>
</div>
I am trying to change the text in the button using angular I am pretty much done but I have a few questions.
First, my code below just changes the text when I click the first time, how can I change it again after the second click? That button is hiding a <DIV> so that is the reason for the change?
Angular:
angular.module('test',[])
.controller('MyCtrl',function ($scope) {
$scope.myText = 'Press to start';
$scope.start = function () {
$scope.myText = 'Starting...';
}
});
HTML:
<body ng-controller="MyCtrl">
<button ng-click="start()"> {{ myText }} </button>
</body>
The second part of my question is:
How can I apply that code in that code up in that HTML and Angular?
HTML:
<a ng-click="Menu()" class="btn btn-default" id="menu-client">hide the search</a>
Angular:
$scope.Menu = function(){
$("#wrapper").toggleClass("toggled");
};
Changing text:
JS
angular.module('test',[])
.controller('MyCtrl',function ($scope) {
$scope.myText = 'Press to start';
$scope.start = function (myText) {
$scope.myText = (myText === 'Starting...') ? 'Finish' : 'Starting...';
}
});
HTML
<body ng-controller="MyCtrl">
<button ng-click="start(myText)"> {{ myText }} </button>
</body>
Changing class:
JS
$scope.isToggled = false;
HTML
<a ng-click="isToggled = true" class="btn btn-default" ng-class="{toggled: isToggled}" id="menu-client">hide the search</a>
HTML
<a ng-click="Menu()" class="btn btn-default" id="menu-client">hide the search</a>
Angular
$scope.Menu = function(){
$scope.isHedden = true;
};
Now whichever element in the HTML that you want to hide/show, use ngHide directive for that:
<some-element ng-hide="isHidden">Some plain text or value goes here</some-element>
Look out https://docs.angularjs.org/api/ng/directive/ngHide for more details on this directive.