I'm trying to compare two dates in a controller function and returning true/false to ng-show and ng-hide based on the logic in the controller, but it is not working as expected, below is the plnkr for the same. Can someone please help me figure out what is the issue.
http://plnkr.co/edit/CWvb1uy0PeYFb0Tf34rY?p=preview
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope,$filter) {
$scope.name = 'World';
$scope.SetDate=function(dt)
{
$scope.NewDt=$filter('date')(dt, 'shortDate');
$scope.currentDate = $filter('date')(new Date(), 'shortDate');
$scope.parsedCurr=Date.parse($scope.currentDate);
$scope.parsedFuture= Date.parse($scope.NewDt);
if ( $scope.parsedCurr <$scope.parsedFuture) {
return true;
}
}
});
You are denying twice, you have:
<span ng-hide="!SetDate('2015-12-31T00:00:00')">
and you need
<span ng-hide="SetDate('2015-12-31T00:00:00')">
If all you need to check are the two parsed dates I would do the check in the ng-show to simplify the code.
<span ng-show="parsedCurr < parsedFuture">
You can see me!
</span>
<span ng-hide="parsedCurr < parsedFuture">
You can't see me :(
</span>
Or if you wan't to use the funtion just change the logic slightly and use either ng-show or ng-hide. Like this:
$scope.SetDate=function(dt)
{
$scope.NewDt=$filter('date')(dt, 'shortDate');
$scope.currentDate = $filter('date')(new Date(), 'shortDate');
$scope.parsedCurr=Date.parse($scope.currentDate);
$scope.parsedFuture= Date.parse($scope.NewDt);
if ( $scope.parsedCurr < $scope.parsedFuture) {
return true;
}
else
{
return false;
}
}
And your markup like this:
<span ng-show="SetDate('2015-12-31T00:00:00')">
SHOW ME
</span>
<br>
<span ng-hide="SetDate('2015-12-31T00:00:00')">
HIDE ME
</span>
Related
Is there a way for JavaScript to interact with the DOM on a WordPress page. Or is interaction only possible through jQuery?
Button element in header.php:
<div id="settings" class="special-menu__item btn-settings">
<button class="special-menu__title">
<i style="margin-right: 10px" class="fa fa-cog" aria-hidden="true"></i>
Настройки
</button>
</div>
JavaScript Code:
const settingButton = document.getElementById("settings");
let toggle = false;
settingButton.addEventListener("click", function _f() {
if (toggle === false) {
settingButton.classList.add("active");
settingOpen.classList.add("open");
} else {
settingButton.classList.remove("active");
settingOpen.classList.remove("open");
}
toggle = !toggle;
removeEventListener("click", _f);
});
I was having this issue too.
In the console, I could grab any element I wanted with getElementById or querySelector. But when I would select it in my custom JS code, it would be null.
To get around this, you can just add your code in a load event listener. This way, after the page loads, you can run your code and change the DOM element how you want.
It might not be the most functional thing to watch, but it works.
example:
window.addEventListener('load', () => {
const element = document.querySelector('#elementId');
console.log('element I selected:', element)
})
I wanna a text change acording to how many times a button clicked?
Any one with a solution??
Here is a simple Javascript that will change based on the number of times clicked.
An important thing to remember though - session storage will set your value to 0 when the tab is closed, local storage does not.
https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_webstorage_local_clickcount
<script>
function clickCounter() {
if (typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = localStorage.clickcount;
} else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
<p><button onclick="clickCounter()" type="button">Click me!</button></p>
<p><span>You have clicked the button </span>
<span id="result"></span>
<span> time(s).</span></p>
This Meteor client code is expected to show a progress bar animation when a button is clicked. The problem is that the progress element is null when the animation code tries to use it.
How can it be fixed? thx
Template.registerHelper('session', (value) => {
return Session.get(value);
})
Template.footer.events({
'click button[data-action=carSearch]': function (e) {
e.preventDefault();
clickInfo();
}
});
'clickInfo': function () {
Session.set('inProgress', true); // makes the element visiable
progressBarStart(); // start the animation
}
'progressBarStart': function () {
let bar = document.getElementById('bar'); //<-- bar is always null
if (bar.value < 70) {
setTimeout(lib.progressBarStart(), 1000); controls the speed
bar.value += 1;
}
}
<template name="nameSearch">
<div id="nameSearch">
<p id="result" data-id={{_id}}>
{{{display.result}}} <br>
{{#if (session 'inProgress')}}
<progress id="bar" value="0" max="70"></progress>
{{/if}}
</p>
</div>
</template>
You should give the render a time to re-render after calling Session.set('inProgress', true);, 50ms will be enough.
Next, you should declare clickInfo and progressBarStart correctly, not like you have them now.
function clickInfo() {
Session.set('inProgress', true);
Meteor.setTimeout(progressBarStart, 50);
}
function progressBarStart() {
...
}
I'd also recommend to use dedicated helper to obtain inProgress status:
Template.footer.helpers({
isInProgress: function() {
return Session.equal('inProgress', true);
}
});
And use it in your template:
{{#if isInProgress}
...
{{/if}}
You must not use Session variables for such a small reason. Meteor JS has given a facility to use Reactive Variables at template level manipulations.
You should give the render a time to re-render after calling Template.instance().inProgress.set(true);.
I'd also recommend to use dedicated helper to obtain inProgress status:
Template.footer.onCreated(function(){
this.inProgress = new ReactiveVar(false);
});
Template.footer.helpers({
isInProgress: function() {
return Template.instance().inProgress.get();
}
});
And use it in your template:
{{#if isInProgress}
...
{{/if}}
Refer to the following code:
Template.EditProfile.helpers({
'welcomeMessage': function() {
if (Session.get("welcomeMessage")) {
var welcomeMessage = Session.get("welcomeMessage");
delete Session.keys['welcomeMessage']
return welcomeMessage;
} else {
return false;
}
}
})
In html,
{{#if welcomeMessage}}
<div class="change-explain red-msg">{{ welcomeMessage }}</div>
{{else}}
<div class="change-explain">People will see your username on your comments.</div>
{{/if}}
This always renders nothing. If I take that outside if statements, it works fine. What am I missing here about reactive style?
In Meteor the Session variable itself is reactive, meaning that when you change the value of the "welcomeMessage" session variable, your "welcomeMessage" helper will run again and not display anything. To give it a test, comment out the delete Session.keys['welcomeMessage'] and while your app is running, set the session manually in the console by typing something like Session.set('welcomeMessage', "test") and then Session.set('welcomeMessage')
If you wanted to set the class based off that session variable you could add a helper like:
'getClass': function() {
var className = "";
if (Session.get("welcomeMessage"))
className = 'red-msg';
return className;
}
and a message helper like:
'getMessage': function() {
var messsage = "People will see your username on your comments.";
if (Session.get("welcomeMessage"))
messsage = Session.get("welcomeMessage");
return messsage;
}
and then your html would look like:
<div class="change-explain {{getClass}}">{{getMessage}}</div>
I have a simple problem. I want to update my classes inside my inputs on form submit.
<div class="form-group">
<input class="form-control" ng-class="{'has-error': signup.$submitted && signup.name.$invalid}" type="text" name="name" ng-model="formData.name" required minlength="2" placeholder="Full Name">
</div>
Here's my app.js:
spinnrApp.controller('FormController', ['$scope', '$http', '$state', function (scope, http, state){
// get list of cities and store it to select
http.get('cities.json').success(function(data){
scope.cities = data;
})
// we will store all our form data in this object
scope.formData = {};
// function to process the form
scope.processForm = function(isValid) {
scope.$submitted = true;
if(isValid && state.$current=='registration.spinnrapp') {
state.go('registration.artist');
} else if(isValid && state.$current=='registration.artist') {
state.go('registration.share');
} else if(!isValid && state.$current=='registration.artist') {
alert('Please make sure you have selected an artist.');
} else if(!isValid && state.$current=='registration.spinnrapp') {
return;
}
};
}]);
When I execute my submit via ng-click calling this function, my signup.$submitted still stays as false. I also have a reference from this Plunker: http://plnkr.co/edit/xDIzC0A50cXxMpIHeP3C?p=preview
That Plunkr updates its class. Why isn't mine doing the same? Am I doing something wrong?