I am trying to remove a range on my table. Here is my HTML code:
<td ><button id="btnRemoveRange" class="pull-left btn btn-xs btn-success" ng-click="removeRange(this)"><i class="fa fa-minus" aria-hidden="true"></i></button></td>
And my JS function is this:
$scope.removeRange = function(obj){
obj.parentNode.parentNode.style.display='none';
}
But it is not working.
I tried using Span and it worked with this code:
<td><span onclick="this.parentNode.parentNode.style.display = 'none';">x</span></td>
Can you please tell me what did I do wrong in the first code?
Thanks
Use angular.element().css() like the following:
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope){
$scope.removeRange = function(obj){
var el = angular.element(document.querySelector( '#btnRemoveRange')).parent();
//console.log(el);
el.css('display','none');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="myApp" ng-controller="myController">
<div><td><button id="btnRemoveRange" class="pull-left btn btn-xs btn-success" ng-click="removeRange(this)"><i class="fa fa-minus" aria-hidden="true"></i>Click</button></td></div>
</div>
Try to debug it with alert();, I'm not sure whether the function has been executed.
Also it is a best practice to determine whether the element exists - in order to prevent JS errors.
$scope.removeRange = function(obj){
alert("Something is happening?");
if (obj.parentNode.parentNode)
obj.parentNode.parentNode.style.display='none';
return false;
}
Another option is to use a raw javascript and define "function removeRange(obj)":
<button id="btnRemoveRange" ... onclick="return removeRange(this)">
Related
I am new to AngularJS and could really use some help. I have a button that's shown below that is part of a form. I need to show a modal when the form is submitted if the button is not clicked. How can I perform this check? I have tried several things with no luck.
<button ng-repeat="car in cars" btn-checkbox-false
class="btn btn-default btn-block text-left"
ng-click="AddRemoveCar(cars)">
<i ng-show="carInStock(cars)"
class="fa fa-check pull-right btn-success btn btn-xs" />
<i ng-show="!carInStock(cars)"
class="fa fa-plus pull-right btn-warning btn btn-xs" />
{{car.Model}}
</button>
Consider using the UI-Bootstrap uib-btn-checkbox directive for your Twitter Bootstrap checkboxes.
The uib-btn-checkbox directive, makes a group of Twitter Bootstrap buttons behave like a set of checkboxes.
Then your submit function can check the state of the model as bound with the ng-model directive.
For more information, see
UI-Bootstrap API Reference - Buttons
The DEMO1
angular.module('ui.bootstrap.demo', ['ngAnimate', 'ngSanitize', 'ui.bootstrap'])
.controller('ButtonsCtrl', function ($scope) {
$scope.checkModel = {
left: false,
middle: true,
right: false
};
$scope.$watchCollection('checkModel', function () {
$scope.checkResults = [];
angular.forEach($scope.checkModel, function (value, key) {
if (value) {
$scope.checkResults.push(key);
}
});
});
})
<script src="//unpkg.com/angular/angular.js"></script>
<script src="//unpkg.com/angular-animate/angular-animate.js"></script>
<script src="//unpkg.com/angular-sanitize/angular-sanitize.js"></script>
<script src="//unpkg.com/angular-ui-bootstrap/dist/ui-bootstrap-tpls.js"></script>
<link href="//unpkg.com/bootstrap#3/dist/css/bootstrap.min.css" rel="stylesheet">
<body ng-app="ui.bootstrap.demo" ng-controller="ButtonsCtrl">
<h4>Checkbox</h4>
<pre>Model: {{checkModel}}</pre>
<pre>Results: {{checkResults}}</pre>
<div class="btn-group">
<label class="btn btn-primary" ng-model="checkModel.left"
uib-btn-checkbox>Left</label>
<label class="btn btn-primary" ng-model="checkModel.middle"
uib-btn-checkbox>Middle</label>
<label class="btn btn-primary" ng-model="checkModel.right"
uib-btn-checkbox>Right</label>
</div>
</body>
I would be setting up some flag on the button click and check that value on form submit.
In my controller define a variable like btnClickedFlag = false;
In Button click function:
AddRemoveCar(cars) => {
this.btnClickedFlag = true;
}
Now on form submit , you can just check if btnClickedFlag is true if not display your modal/dialogue/overlay on screen.
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 have a Handlebars script that I am trying to get to iterate through an object to my 'template' below. Even though I can see the 'badNodes' in the object (an object when i do a console.log(row) it doesn't ever pass to the template and all I see is a blank entry next to address in the view/template.
Can anyone suggest what I may have done wrong - P.S I am new to Handlebars.js
<script class="template" type="text/html">
<div class="badNodesContainer">
{{#row}}
<div class="hash{{badNodes.hash}} help-tip">
<p>
<strong>Address: </strong>{{badNodes.address}}</br>
</p>
</div>
{{/row}}
</div>
</script>
// latter part of ajax request
.done(function (data, result, jqXHR) {
var checkinData = JSON.parse(data).data;
var rows = [];
//_.templateSettings.variable = "badNode";
var source = $("script.template").html();
var template = Handlebars.compile(source);
$.each(checkinData, function (index, row) {
row.badNodesHTML = "";
var AB_action_login = '<a class="btn btn-default btn-sm" style="width:70px;text-align:left;" target="_blank" href="http://asite.com/app/login.php?username=' + row.user + '&hash=' + row.signature + '"><i class="fa fa-external-link"></i> App</a>';
if (row.postid == null) {
var AB_action_order = '<a class="btn btn-default btn-sm hidden" disabled="disabled" style="width:70px;text-align:left;" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post=' + row.postid + '&action=edit"><i class="fa fa-external-link"></i> Order</a>';
} else {
var AB_action_order = '<a class="btn btn-default btn-sm" style="width:70px;text-align:left;" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post=' + row.postid + '&action=edit"><i class="fa fa-external-link"></i> Order</a>';
}
row.AB_login = AB_action_login;
row.AB_order = AB_action_order;
row.AB_actions = AB_action_login + AB_action_order;
if (row.badNodes.length) {
$.each(row.badNodes, function (idx, badNode) {
badNode.address.toString()
badNode.address = /:(.+)/.exec(badNode.address)[1];
row.badNodesHTML += template(badNode);
row.AB_actions;
});
}
}
);
You are accessing the object via #row inside your template even though the object you pass into the template looks like this:
{
hash: 'some hash',
address: 'some address'
}
So, in order to bind it try to access it by key instead like this:
<script class="template" type="text/html">
<div class="badNodesContainer">
<div class="hash{{hash}} help-tip">
<p>
<strong>Address: </strong>{{address}}</br>
</p>
</div>
</div>
</script>
Also, assuming that badNodes is an array of bad nodes, you could use each in your declaration when you pass row to the template directly. Try this:
<script class="template" type="text/html">
<div class="badNodesContainer">
{{#each badNodes}}
<div class="hash{{hash}} help-tip">
<p>
<strong>Address: </strong>{{address}}</br>
</p>
</div>
{{/each}}
</div>
</script>
I suggest you prepare a javascript object that has the exact shape and form you would like and then pass it to the template. You are formatting the output in an $.each loop and pass each row individually which could get messy from an organizational perspective. Also, you are creating html inside your javascript for the button which you could put in the template as well. Then, all you have to do is pass one row object to the template that has all required information.
A refactored version could look like this:
<style media="screen">
.btn-zabs {
width:70px;
text-align:left;
}
</style>
<script type="text/javascript">
.done(function (data, result, jqXHR) {
var checkinData = JSON.parse(data).data;
var rows = [];
var source = $("script.template").html();
var template = Handlebars.compile(source);
var $container = $("#parent-of-badNodesContainer");
$.each(checkinData, function (index, row) {
if (row.badNodes.length) {
$.each(row.badNodes, function (idx, badNode) {
badNode.address.toString()
badNode.address = /:(.+)/.exec(badNode.address)[1];
});
}
});
$container.html(template(checkinData));
});
</script>
<script class="template" type="text/html">
<a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://asite.com/app/login.php?username={{user}}&hash={{signature}}"><i class="fa fa-external-link"></i> App</a>
<div class="badNodesContainer">
{{#each badNodes}}
<div class="hash{{hash}} help-tip">
<p>
<strong>Address: </strong>{{address}}</br>
</p>
</div>
{{/each}}
</div>
{{#if postid}}
<a class="btn btn-default btn-sm btn-zabs hidden" disabled="disabled" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
{{else}}
<a class="btn btn-default btn-sm btn-zabs" target="_blank" href="http://www.mysite.co.uk/wp-admin/post.php?post={{postid}}&action=edit"><i class="fa fa-external-link"></i> Order</a>
{{/if}}
</script>
Note, I put the button templates in an arbitrary spot. I'm sure you would want to re-organize where they belong. This is for demonstration only.
I am trying to create a button group of two (using bootstrap and angularjs) that, when clicking on them, each would redirect to a different URL. I currently have the following code (copied only the relevant pieces):
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
However, this doesn't work, and I am not sure why. I might not be passing the arguments correctly, but I tried it even without passing the link itself and it still didn't work. Would appreciate any help!
Are you trying to pass the url ?,
if so, then i would be like this :
app.controller('LinkController',function(link, $scope, $location){
$scope.go = function(link){
$location.url(link);
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button type="button" class="btn btn-primary" data-ng-click = "go('test1.html')">Click1</button>
<button type="button" class="btn btn-primary" data-ng-click = "go('test2.html')">Click2</button>
</div>
Ok so after many many attempts, and with some inspiration from the answers above, I was able to solve it in the following way:
app.controller('LinkController',function($scope){
$scope.go = function(link){
window.location = link;
};
});
<div class="btn-group btn-group-lg" data-ng-controller = "LinkController">
<button id = Image type="button" class="btn btn-primary"
data-ng-click = "go('Test1.html')">Click1</button>
<button id = Text type="button" class="btn btn-primary"
data-ng-click = "go('Test2.html')">Click2</button>
</div>
Thanks for your help guys.
I don't know much of Angular js, but there are other alternative ways to achieve the same purpose. This works with simple html
<div class="btn-group btn-group-lg">
<input type="button" class="btn btn-primary">Click1</input>
<input type="button" class="btn btn-primary">Click2</input>
</div>
Notice I changed the button element to input, this because a button element can not be placed inside an anchor tag <a>.
I hope this helps
I am trying to create a toggle button in Angular. What I have so far is:
<div class="btn-group">
<a class="btn btn-primary pull-right"
ng-click="toggleArchive(true)"
ng-show="!patient.archived">Archive patient</a>
<a class="btn btn-danger pull-right"
ng-click="toggleArchive(false)"
ng-show="patient.archived">Unarchive patient</a>
.... some other buttons ....
</div>
Basically I achieve toggling, by having TWO buttons, and toggling between them. This is causing issues because the ng-hide just adds a display:none style to the button when it's hidden, which is causing me styling issues. Ideally I want to have ONE button, that has it's text, class and function call changed depending on the state of patient.archived.
What's a clean way to achieve this?
You should use ng-class to toggle between classes and bind the text with a regular Angular expression. Also, if your function toggleArchive only toggle the value, you can remove it and toggle the value from an Angular expression:
<a class="btn pull-right"
ng-class="{true: 'btn-primary', false: 'btn-danger'}[!patient.archived]"
ng-click="patient.archived = !patient.archived">
{{!patient.archived && 'Archive' || 'Unarchive'}} patient
</a>
for any other weary traveller...
you could simply have used ng-if. ng-if completely excludes the element from the DOM if false, so you'd have no issues with styles when not displayed. Also there is not really a need for the button group you could just change the text of the button
Something like this:
<button class="btn btn-primary pull-right"
ng-click="toggleArchive(true)"
ng-if="!patient.archived">Archive patient</button>
<button class="btn btn-danger pull-right"
ng-click="toggleArchive(false)"
ng-if="patient.archived">Unarchive patient</button>
It might help you:
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/app.js"></script>
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body ng-app>
<div ng-controller="MyCtrl">
<button ng-click="toggle()">Toggle</button>
<p ng-show="visible">Hello World!</p>
</div>
</body>
</html>
function MyCtrl($scope) {
$scope.visible = true;
$scope.toggle = function() {
$scope.visible = !$scope.visible;
};
}
This may Help:
<!-- Include Bootstrap-->
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.3.js"></script>
<!-- Code -->
Click here to <strong>Toggle (show/hide)</strong> description
<input type="checkbox" class="toggle-button"
ng-model="patient.archived">
Then style the checkbox like a button.
if the toggle needs to do more things, add the following to your patient class:
class Patient {
constructor() {
this.archived = false;
}
...
get angularArchived() {
return this.archived;
}
set angularArchived(value) {
if (value !== this.archived) {
toggleArchived(value);
}
this.archived = value;
}
}
then use
<input type="checkbox" class="toggle-button"
ng-model="patient.angularArchived">
This is the simplest answer I've found. I haven't tried it with animations because I just use it for quick setup.
<a ng-click="scopeVar=scopeVar!=true">toggle</a>
<div ng-show="scopeVar">show stuff</div>
with scopeVar=scopeVar!=true undefined becomes true.