Develop Reference

Checking login and password in AngularJS

When I press Sign In in my autorization it should change the signInValid to true,but unfortunetly only alert working:(
And is it correct to use FOR in angularJS to see is login and pass correct? Or there are some better ways to do it?
Here`s my JS code:
$scope.signInValid = false;
$scope.signIn = function (userDetails) {
for (let i = 0; i < $scope.userlist.length; i++) {
if (userDetails.login == $scope.userlist[i].username && userDetails.password == $scope.userlist[i].password) {
alert('welcome')
$scope.signInValid = true;
}
}
}
Here`s HTML code:
<h1>Permissions allowed: <span style="{{setStyle(signInValid)}}">{{signInValid}}</span></h1>

And if you invert and set the signInValid property to true first ?
if (userDetails.login == $scope.userlist[i].username && userDetails.password == $scope.userlist[i].password) {
$scope.signInValid = true;
alert('welcome');
}

Fixed it by setting controller to body block,my div wasnt inside the controlle scope.Thanks all for answers!

Loop for in a .mousemove function

My problem is here :
$(document).mousemove(function(e){
for(i = 1; i < 7; i++){
var tt = document.getElementById("tooltip"+i);
document.getElementById("help"+i).onmousemove=function(event){
if(tooltip == 1){
$(tt).css({left:e.pageX+5, top:e.pageY+5});
tt.style.visibility= "visible";
}
}
document.getElementById("help"+i).onmouseout=function(event){
tt.style.visibility= "hidden";
}
}
});
With this code, the <div id="tooltip"+i> is showing right next to the mouse, but it's always the last "tooltip"+i, in this case tooltip6 which is showing.
I managed that to work by simply removing the loop for, and writing 6 times that next, each with a different i :
$(document).mousemove(function(e){
var i = 1;
var tt = document.getElementById("tooltip"+i);
document.getElementById(i).onmousemove=function(){
if(tooltip == 1){
$(tt).css({left:e.pageX+5, top:e.pageY+5});
tt.style.visibility= "visible";
}
}
document.getElementById(i).onmouseout=function(){
tt.style.visibility= "hidden";
}
});
In this case, it does what i want. It shows the tooltip1, when the mouse is over the <div id=help1>, and (e.g.) tooltip4 over the <div id=help4> if i use var i = 4.
I can obviously just write more and more like that as i add more tooltips, but i really don't understand why the adding of the loop is not working here.
My HTML code with the tooltips :
<span id=tooltip1>Health points of the rock. Each time it gets to 0, you get some stone</span>
<span id=tooltip2>Deeper you go, harder it is.</span>
<span id=tooltip3>Power of the Pickaxe.</span>
<span id=tooltip4>Go To the Village.</span>
<span id=tooltip5>Go To the Blacksmith.</span>
<span id=tooltip6>You can sell stone in the village.</span>
And HTML code with some of the help :
<div class=liststat id=help1>HP : <span id=hp>0</span></div>
<br>
<br>
<div class=liststat id=help2>Deep Level : <span id=lvlrock>0</span>m</div>
<br>
<br>
<div class=liststat id=help3>Pick Power : <span id=pickpower>0</span></div>
<br>
<br>
<div class=liststat id=help6>Stone : <span id=nstone>0</span></div>

Okay, so after reading the comment, i edited my code to make it simpler, and not adding any other listener, to not crash the script :
$(document).mousemove(function(e){
if(tooltip == 1){
var i = e.target.id;
var tt = document.getElementById("tooltip"+i);
tt.style.visibility = "visible";
$(tt).css({left:e.pageX+5, top:e.pageY+5});
document.getElementById(i).onmouseout=function(){
tt.style.visibility= "hidden";
}
}
});

How to avoid rendering element as simple as possible

I have a reactJS component that looks like this :
var LikeCon = React.createClass({
render(){
return this.renderLikeButton(this.props.like, this.props.likeCount)
},
renderLikeButton(like, likeCount){
var content;
var tmpLikeCount;
if(likeCount < 1){
tmpLikeCount = "";
}
else{
tmpLikeCount = likeCount;
}
if(like == 1){
content = <div className="likeButConAct"><div className="likeB"> </div><div className="likeCount">{tmpLikeCount}</div></div>
}
else{
content = <div className="likeButCon"><div className="likeB"> </div><div className="likeCount">{tmpLikeCount}</div></div>
}
return content;
}
});
Say that I want to hide the likeCount element if there is no likes. How do I do this as simple as possible? I don´t want another component to render this.

If your variable is null or undefined then React simply won't render it. That means your conditional code can be as simple as:
var tmpLikeCount;
if(likeCount >= 1){
tmpLikeCount = likeCount;
}
But I think you can make your code even simpler using class sets:
http://facebook.github.io/react/docs/class-name-manipulation.html
var LikeCon = React.createClass({
render(){
var likeCountCmp;
var classes = React.addons.classSet({
likeButCon: true,
active: this.props.like
});
if(this.props.likeCount > 0) {
likeCountCmp = <div className="likeCount">{this.props.likeCount}</div>;
}
return (
<div className={classes}>
<div className="likeB"> </div>
{likeCountCmp}
</div>
)
}
});
A final variation that I think will work is to use an implicit function return:
var LikeCon = React.createClass({
render(){
var classes = React.addons.classSet({
likeButCon: true,
active: this.props.like
});
return (
<div className={classes}>
<div className="likeB"> </div>
{this.getLikeCountCmp()}
</div>
)
},
getLikeCountCmp: function() {
if(this.props.likeCount > 0) {
return <div className="likeCount">{this.props.likeCount}</div>;
}
}
});
if we don't specifically return anything from getLikeCountCmp, we end up with undefined, which React renders as nothing.
Note that I'm a bit confused with your like == 1 comparison - should that be true/false rather than a number? I've assumed this.props.like will be true or false in my examples. That means it'd be called with:
<LikeCon like={true|false} likeCount={5} />

If you like to put everything inline, you can do this:
renderLikeButton(like, likeCount){
return (<div className={like==1 ? "likeButConAct" : "likeButCon" }>
<div className="likeB"> </div>
{ likeCount > 0 ? <div className="likeCount">{likeCount}</div>: null }
</div>);
}
That way you wont be rendering .likeCount div if likeCount is 0.
jsFiddle: http://jsfiddle.net/715u9uvb/

what about using the className to hide the element?
something like :
var cssClasses = "likeButConAct ";
if ( likeCount < 1 ) {
cssClasses += "hidden";
}
...
return <div className=cssClasses><div ...
EDIT
var content;
var tmpLikeCount;
var likeCounterComponent;
if(likeCount > 0){
likeCounterComponent = <div className="likeCount">{likeCount}</div>
}
if(like == 1){
cssClasses = "likeButConAct"
}
else{
cssClasses = "likeButCon";
}
return (
<div className=cssClasses>
<div className="likeB"> </div>
{ likeCounterComponent }
</div>);
You can add the likeCounter only if there are likes. If there are likes the likeCounterComponent contains the JSX code to render the likes counter, otherwise is undefined and therefore nothing will be rendered.
I haven't tried to run the code, but I guess you got the idea to solve this problem. :D

Colin's answer looks good to me.. if your issue is with having aspects of rendering extracted to a separate function, you don't HAVE to do that. This works too:
return (
<div className={classes}>
<div className="likeB"> </div>
{this.props.likeCount > 0 && (
<div className="likeCount">{this.props.likeCount}</div>
)};
</div>
)

....
if (likeCount < 1) {
return "";
}
....

angularjs-how to implement click in angular

I am a newbie in angularjs.
I was stuck on a code and wanted some help.
I am having a controller called watchlist controller in which I am getting the data which is to be displayed in the watchlist.
However I want to display the data only once the watchlist tab is clicked.
This is the Html code :-
<div class='watchlist' >
<button class='btn' id="watchList" ng-click="fetchUserWatchlist()" watchlist-popover ng-controller="WatchlistController">
<i class="hidden-tablet hidden-phone"></i>
<span class = 'mywatchlist'>My Watchlist</span>
<div class = 'watchlist-spinner ' ></div>
</button>
</div>
My controller(watchlist):-
$scope.fetchUserWatchlist = function(pageno,callback){
$scope.isLoading = true;
$rootScope.isrequest = true;
userAPI.myWatchlist({userid:$rootScope.getUser().userid,pageno:pageno}, function(r) {
if (_.isNull(r.watchlistdata)) {
if(typeof callback == 'function'){
callback();
}
if(pageno == 1){
$scope.watchlist = [];
$scope.watchlistCount = 0;
}
if (!$rootScope.apiCalled && pageno == 1){
if(!_.isUndefined($rootScope.watchlistClicked) && $rootScope.watchlistClicked){
$rootScope.$broadcast("watchlist::click");
imageLoadingIndicator();
}
$rootScope.apiCalled = true;
}
return false;
}
if (!_.isUndefined(r.watchlistdata.watchlist)){
var rawData = [];
var tempWatchlist = $scope.watchlist;
if (_.isArray(r.watchlistdata.watchlist))
rawData = r.watchlistdata.watchlist;
else
rawData = [r.watchlistdata.watchlist];
if (pageno == 1) {
$scope.watchlistCount = parseInt(rawData[0].totalcount);
}
if ($scope.watchlist.length == 0 || ($scope.watchlist.length > 0 && pageno == 1))
$scope.watchlist = rawData;
else
_.each(sortByDate(rawData),function(item){
if (! _.some(tempWatchlist,function(existingItem){ return existingItem.programmeid == item.programmeid; }))
{
$scope.watchlist.push(item);
}
});
$scope.watchlistPage += 1;
$timeout(function(){
if (!$rootScope.apiCalled && pageno == 1){
if(!_.isUndefined($rootScope.watchlistClicked) && $rootScope.watchlistClicked){
$rootScope.$broadcast("watchlist::click");
imageLoadingIndicator();
}
$rootScope.apiCalled = true;
}
},1);
$rootScope.isrequest = false;
if(typeof callback == 'function'){
callback();
}
}else
$rootScope.end = true;
});
};
So basically I want to implement ng-click on the controller but here in the above scenario it does not help..The data is called before the button is clicked.
Please help me with this

ng-click will work using the scope:
ng-click="executeThis()"
will look in the $scope for a variable named 'executeThis'. F.e.:
$scope.executeThis = function(){
// Do stuff you want
};
So when you click the element that has this ng-click attribute, the executeThis function on the scope will be executed. In this function you should do whatever you want to do. To display something when you click it, you could use the function to set a variable on the scope to true and then use ng-show to display what you want to display.
HTML:
<div ng-show="varX">someDiv</div>
JS inside controller:
$scope.varX = false;
So whenever you set this variable to true, your element should be shown.
However, I do suggest following some tutorials since I suspect you don't yet grasp how angular works.. Understanding how the fundamentals of angular work is definitely necessary if you want to develop an app.

try
<button class='btn' id="watchList" ng-click="myClickFunction()" watchlist-popover ng-controller="WatchlistController">
The best way to learn (IMHO) is documentation :-)

How to loop same javascript code for more than one div elements?

I have made three "boxes" and each box contains a button. When I click the button, box hiding, when click again, box appears.
This is my html code:
<div id="SC1_A_"> <!-- BOX -->
<div id="SC1_B_" onClick="SC1();" class="something"> </div> <!-- BUTTON -->
</div>
<div id="SC2_A_">
<div id="SC2_B_" onClick="SC2();" class="something"> </div>
</div>
<div id="SC3_A_">
<div id="SC3_B_" onClick="SC3();" class="something"> </div>
</div>
This is my javascript code:
<script type="text/javascript">
function SC1(){
var SC1_A = document.getElementById('SC1_A_);
var SC1_B = document.getElementById('SC1_B_);
if (SC1_A.style.display == 'block' || SC1_A.style.display == ''){
SC1_A.className = 'something';
SC1_B.className = 'something else';}
else {SC1_A.className = 'something else';
SC1_B.className = 'something';}
}
}
</script>
The example above works, but I have to make three similar scripts for each button. So I though to make something like this script below, using for loop. As you can imagine it didn't work. Any idea how can I make it work???
<script type="text/javascript">
for (i=1; i<10; i++){
function SCi(){
var SCi_A = document.getElementById('SC'+i+'_A_');
var SCi_B = document.getElementById('SC'+i+'_B_');
if (SCi_A.style.display == 'block' || SCi_A.style.display == ''){
SCi_A.className = 'something';
SCi_B.className = 'something else';}
else {SCi_A.className = 'something else';
SCi_B.className = 'something';}
}
}
</script>
Please don't down-vote if you think question is too easy, but just give me your help here!!! Thank you in advance!!!

You're on the right track, you just need to learn the right syntax for what you are trying to express:
var SC = [];
First off, to have a lot of different functions, so instead of attempting to name them differently (which you were trying to do), we are going to just store each function in a different index in the SC array.
for (var i = 1; i < 10; i++) {
SC[i] = (function () {
var SC_A = document.getElementById('SC' + i + '_A_');
var SC_B = document.getElementById('SC' + i + '_B_');
return function () {
if (SC_A.style.display === 'block' || SC_A.style.display === '') {
SC_A.className = 'something';
SC_B.className = 'something else';
} else {
SC_A.className = 'something else';
SC_B.className = 'something';
}
}
})();
}
Now, to call these functions you would do SC[1](), SC[2](), ... So you can either put that in each onclick in your HTML, or you could bind the events from the javascript.
Edit: I forgot to mention this because it isn't directly related to the syntax of the code, but the calls to 'document.getElementByIdwill not work until the document is fully loaded. So if you just put the script directly between to` tags it won't work. You have two choices. You either can keep the current code, but run it when the page loads. Or, you could restructure the code like this:
var SC = [];
for (var i = 1; i < 10; i++) {
SC[i] = (function (i) {
return function () {
var SC_A = document.getElementById('SC' + i + '_A_');
var SC_B = document.getElementById('SC' + i + '_B_');
if (SC_A.style.display === 'block' || SC_A.style.display === '') {
SC_A.className = 'something';
SC_B.className = 'something else';
} else {
SC_A.className = 'something else';
SC_B.className = 'something';
}
}
})(i);
}
What's happening here is you are calling document.getElementById every time the button is clicked, instead of just once when the function is created. Slightly less efficient, but it works.

You define each section on the page as calling the one function and passing in the name of the other .
<div id="SC1_A_"> <!-- BOX -->
<div id="SC1_B_" onClick="SC('SC1_A_');" class="something"> </div> <!-- BUTTON -->
</div>
<div id="SC2_A_">
<div id="SC2_B_" onClick="SC('SC2_A_');" class="something"> </div>
</div>
<div id="SC3_A_">
<div id="SC3_B_" onClick="SC('SC3_A_');" class="something"> </div>
</div>
There is just one function used for all of them
function SC(nameOfA){
var SCi_A = document.getElementById(nameOfA);
var SCi_B = this;
if (SCi_A.style.display == 'block' || SCi_A.style.display == ''){
SCi_A.className = 'something';
SCi_B.className = 'something else';
} else {
SCi_A.className = 'something else';
SCi_B.className = 'something';}
}
}

here you can use this function on every click:
<div id="SC1_A_"> <!-- BOX -->
<div id="SC1_B_" onClick="SC(event)" class="something"> </div> <!-- BUTTON -->
</div>
<script type="text/javascript">
function SC(event){
var SCA = event.currentTarget.parentNode;
var SCB = event.currentTarget;
................
}
</script>

Your code is defining a function named SCi 8 times. I think if you swap the first two lines you will get what you want.

You're redefining the same function (function SCi) eight times. The only version of the function that is retained is the version that's defined last. Going by your code, you're only creating a function that can work with the 8th box.