AngularJS SPA edit button function - javascript

I'm new to AngularJS, currently I am trying to create a spa for tracking expenses as a simple project but I have some problems with my code.
I managed to do the most of the function but I got stuck at the edit button and edit function. I am trying to make an inline edit function because I already have a form input.
Here is the html and js code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Expenses Tracker</title>
<link rel="stylesheet" href="bootstrap.min.css">
<link href="style.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<span class="navbar-brand"><img src="logo.png" class="brand" height="40" />
Simple Expenses App Tracker</span>
</div>
</div>
</nav>
<div class="main" ng-app="myList" ng-controller="myListController">
<img src="logo.png" class="logo">
<form ng-submit="newItem()" class="form">
<input required type="number" placeholder="Amount" ng-model="amount">
<input required type="text" placeholder="Description" ng-model="description">
<input type="submit" value="Submit" class="btn btn-success">
</form>
<ul>
<li ng-repeat="item in items">
<span class="pull-left"> {{item.amount}} den.</span> {{item.description}}
<span class="buttons">
<input type="button" value="Edit" class="btn btn-primary" >
<input type="button" ng-click="deleteItem($index)" value="Delete" class="btn btn-danger">
</span>
</li>
<br>
<li><span class="total">{{totalPrice()}} den.</span> <span class="expense"> Total Expenses</span></li>
</ul>
</div>
<script src="bootstrap.min.js"></script>
<script src="angular.min.js"></script>
<script src="angular-route.min.js"></script>
<script src="app.js"></script>
</body>
</html>
var myApp = angular.module("myList", []);
myApp.controller("myListController", function($scope) {
$scope.items = [];
$scope.newItem = function() {
$scope.items.push({description:$scope.description, amount: $scope.amount});
$scope.description = '';
$scope.amount = 0
};
$scope.deleteItem = function(index) {
$scope.items.splice(index, 1);
}
$scope.totalPrice = function() {
var total = 0;
for(count=0; count<$scope.items.length;count++){
total += $scope.items[count].amount;
}
return total;
};
});


You could try something like:
$scope.editItem = function(index) {
$scope.amount = $scope.items[index].amount;
$scope.description = $scope.items[index].description;
$scope.deleteItem(index);
}
I also recommend you read this book:
https://www.newline.co/ng-book/modern-ng1/
Try to move away from using $scope for bindings and user components. Unless you really don't care where this project goes.

Related

Changing status data (true/false) on Firebase by web

I can't change the status data on my Firebase project with the HTML site and using javascript (.js) to connect with my Firebase project. I've made checkbox to change the status data on Firebase. But it can't change the data value on Firebase. I've change id checkbox, but there is no result. Anyone please help me. I am newbie. This is my HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description">
<meta name="author">
<title>
Web Kontrol
</title>
<!-- Bootstrap core CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- Custom styles for this template -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <link href="assets/css/style.css" rel="stylesheet"> -->
<link href="assets/css/sh-default.css" rel="stylesheet" default-stylesheet="true" type="text/css">
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body style="cursor: auto;">
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span>
<span class="icon-bar"></span>
</button><a class="navbar-brand" href>Web Kontrol Lampu</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav pull-right">
<li>
<a data-target="#login" href>Login</a>
</li>
<!--<li>
<a data-target="#register" href>Signup</a>
</li>-->
<li>
<a data-target="#lists" href>Control</a>
</li>
<li>
<a id="logout" href>Logout</a>
</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="welcome"></div>
<div class="container tab default" id="login">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
<em class="stackhive-marker"></em>Login to Your Account
</h2>
<hr>
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="" id="login-email"><input type="password" class="form-control" placeholder="Password"
required="" id="login-password">
<button class="btn btn-primary" type="button" id="login-btn">
Login
</button>
<hr>
<div class="status alert alert-info hide"></div>
</form>
</div>
<div class="container tab hide" id="register">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">
Daftar Akun Baru
</h2>
<hr>
<input type="text" class="form-control" placeholder="Your Name" required="" autofocus="" id="name"><input type="email" class="form-control" placeholder="Email address" required=""
autofocus="" id="email"><input type="password" class="form-control" placeholder="Password" required="" id="password">
<button class="btn btn-primary" type="button" id="signup-btn">
Masuk !
</button>
</form>
<hr>
<div class="status alert alert-info hide"></div>
</div>
<div class="container tab hide" id="lists">
<div class="status alert alert-info hide"></div><br>
<h1>Kontrol Lampu</h1>
<div align="center">
<input id="cmn-toggle-1" class="cmn-toggle cmn-toggle-round-1" type="checkbox">
<input id="cmn-toggle-2" class="cmn-toggle cmn-toggle-round-2" type="checkbox">
</div><!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script type="text/javascript" src="./firebasefunctions.js"></script>
<script type="text/javascript" src="./script.js"></script>
<!-- <script type="text/javascript" src="./script-coba.js"></script> -->
</body>
And this .js file
$(document).ready(function() {
//this URL to my FIrebase project
var ref = new Firebase("https://firesmartlamp.firebaseio.com/devices/smartlamp/parameters/");
/*****************************************************************
Get the status on Firebase
******************************************************************/
ref.once("value", function(res) {
var status = res.child("state").val(); //state is my data on Firebase
$('#cmn-toggle-1').attr('checked', status); //cmn-toggle-1 is my checkbox id
console.log("Statusnya: " +status)
});
ref.once("value", function(res) {
var status2 = res.child("state2").val();
$('#cmn-toggle-2').attr('checked', status);
console.log("Statusnya: " +status2)
});
/*****************************************************************
Sync to firebase
******************************************************************/
ref.on("child_changed", function(res) {
var states = res.val();
$('#cmn-toggle-1').prop('checked', states);
console.log("Cek: " +states)
});
ref.on("child_changed", function(res) {
var states2 = res.val();
$('#cmn-toggle-2').prop('checked', states2);
console.log("Cek: " +states2)
});
/*****************************************************************
Update value, changed status of Switch
******************************************************************/
$('#cmn-toggle-1').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state: true }); //true and false are value of data on Firebase
}
else{
console.log("Off")
ref.update({ state: false });
}
});
$('#cmn-toggle-2').on('change', function(){
if(this.checked)
{
console.log("On")
ref.update({ state2: true });
}
else{
console.log("Off")
ref.update({ state2: false });
}
});
});

You're mixing all kinds of data access patterns, so I cleaned those up in your jsbin and made it work. The reading from Firebase is now simply:
/*****************************************************************
Sync with firebase
******************************************************************/
ref.child("state").on("value", function(res) {
var states = res.val();
$('#cmn-toggle-1').prop('checked', states);
});
ref.child("state2").on("value", function(res) {
var states2 = res.val();
$('#cmn-toggle-2').prop('checked', states2);
});
So we have the two state properties (state and state2) and attach a value listener to each. That means the callbacks will be invoked "immediately" with the current value and then once whenever the property changes.

How to use same ng-app for 2 different html page?

I have 2 html page and one app.js
my search-movie.html code as the following :
<!DOCTYPE html>
<html ng-app="adphorusWork">
<head lang="en">
<meta charset="UTF-8">
<title>Search Movie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="app/app.js"></script>
</head>
<body ng-controller="searchMovieController">
<div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;">
<div class="container-fluid">
<ul>
<li>
OMDb Api
</li>
</ul>
</div>
</div>
<div class="container" style="margin-top: 50px;">
<div class="bs-docs-section" id="">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2>My Github</h2>
</div>
<div class="bs-component">
<form class="well form-search" id="search-movie" onsubmit="return false;">
<fieldset>
<legend>Search Movie</legend>
</fieldset>
<div>
<label class="control-label" for="movie-name">Movie Name : </label>
<input type="text" id="movie-name" class="input-small" style="margin-left: 10px;">
<button id="btn-search-movie" type="button" class="btn-sm btn-primary" style="margin-left: 10px;" ng-click="searchMovie()">
<span class="glyphicon glyphicon-search"> Search</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and my result-movie.html code as the following :
<!DOCTYPE html>
<html>
<head ng-app="adphorusWork">
<meta charset="UTF-8">
<title>Search Movie</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="scripts/angular.min.js"></script>
<script src="scripts/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="scripts/jquery-1.9.1.min.js"></script>
</head>
<body ng-controller="resultMovieController">
<div class="navbar navbar-default navbar-fixed-top" style="margin-top: 20px;">
<div class="container-fluid">
<ul>
<li>
OMDb Api
</li>
</ul>
</div>
</div>
<div class="container" style="margin-top: 50px;">
<div class="bs-docs-section" id="">
<div class="row">
<div class="col-lg-12">
<div class="page-header">
<h2>My Github</h2>
</div>
<div class="bs-component">
<fieldset>
<legend>Result for Search Movie</legend>
</fieldset>
<div>
<button id="btn-result-movie" type="button" class="btn-sm btn-primary" style="margin-top: 40px;" ng-click="backtohome()">
<span class="glyphicon glyphicon-circle-arrow-left"> Home</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
and my app.js as the following :
(function (angular) {
'use strict';
var app = angular.module('adphorusWork', []);
app.controller('searchMovieController', function ($scope) {
$scope.searchMovie = function () {
alert("come")
}
});
app.controller('resultMovieController', function ($scope) {
$scope.backtohome = function () {
alert("home")
}
});
})(angular);
My search button is working (in search-movie.html) but my 'Home' button not working(in result-movie.html)
I'm using the same ng-app in two html page. I want to work on other button(so Home button)
Where am I doing wrong ? or How can I fix this error ?

you need to use Angular Ui router for this. And #Lex is correct you are not following the angular SPA framewrok.
This is a good read :https://github.com/angular-ui/ui-router
this link can provide a brief detail about angular ui router https://scotch.io/tutorials/angular-routing-using-ui-router

You don't have:
<script src="app/app.js"></script>
in your result-movie.html page. The bigger question, though, is why are you structuring it like this? Angular is designed as a single page application (SPA) framework. The way you are buidling it I think you are going to end up with a lot of issues long term.

I have noticed that you not include in result-movie.html page
<script src="app/app.js"></script>
as for best approach is you can use ngRoutefor data passing between controllers

ajax not working onclick in shopping cart

I am working with free downloaded "Ustora" template (html theme for eCommerce). In the same I am working with "Add to cart" button in the single-product page. After click it should launch a ajax function that will be insert product data into my cart table in database. But this one is not working.
I am working with this to learn make eCommerce website. Please help as earliest here is my code below.
Single-product-page.php
<?php
$row = mysql_fetch_row(mysql_query("SELECT * FROM `products` where pid='".$_GET['proid']."' "));
echo '<div class="row">
<div class="col-sm-6">
<div class="product-images">
<div class="product-main-img">
<img src="'.$row[5].'" alt="'.$row[2].'">
</div>
<div class="product-gallery">
<img src="'.$row[5].'" alt="'.$row[2].'">
<img src="'.$row[5].'" alt="'.$row[2].'">
<img src="'.$row[5].'" alt="'.$row[2].'">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="product-inner">
<h2 class="product-name">'.$row[2].'</h2>
<div class="product-inner-price">
<ins>'.$row[3].'/- INR</ins> <del>'.$row[3].'/- INR</del>
</div>
<form method="post">
<div class="quantity">
<input type="number" size="4" class="input-text qty text" title="Qty" value="1" name="quantity" id="qty" min="1" step="1" max='.$row[6].'>
</div>
<button class="add_to_cart_button" onclick="addtocart('.$row[1].','.$row[2].','.$row[3].','.$buid.');">
Add to cart
</button>
</form>
<div class="product-inner-category">
<p>Category: Summer. Tags: awesome, best, sale, shoes. </p>
</div>
<div role="tabpanel">
<ul class="product-tab" role="tablist">
<li role="presentation" class="active">Description</li>
<li role="presentation">Reviews</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<h2>Product Description</h2>
'.$row[4].'
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<h2>Reviews</h2>
<div class="submit-review">
<p><label for="name">Name</label> <input name="name" type="text"></p>
<p><label for="email">Email</label> <input name="email" type="email"></p>
<div class="rating-chooser">
<p>Your rating</p>
<div class="rating-wrap-post">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
</div>
<p><label for="review">Your review</label> <textarea name="review" id="" cols="30" rows="10"></textarea></p>
<p><input type="submit" value="Submit"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>';
?>
Header.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Product Page - Ustora Demo</title>
<!-- Google Fonts -->
<link href='http://fonts.googleapis.com/css?family=Titillium+Web:400,200,300,700,600' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Condensed:400,700,300' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,100' rel='stylesheet' type='text/css'>
<script src="jquery.js"></script>
<script type="text/javascript">
function addtocart(pid,name,price,buid)
{
alert("addToCart function working");
var pid = pid;
var pname = name;
var pprice = price;
var pqty = document.getElementById("qty").value; //$(#qty).val();
var buid = buid;
//var cstid = $(#).val();
$.ajax({
type:"POST",
url:"http://localhost/phpsales/insert-cart.php",
data:{pid,pname,pprice,pqty,buid},
cache:false,
success:alert("Product Added Successfully")
//error:function fail(){alert("Some technical error occured dufine product add to cart. Please try after some time.");}
});
}
</script>
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/owl.carousel.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/responsive.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
I just want to launch addtocart() function on "Add to cart" button click and after want to insert data in shopping cart.
Thanks in advance

i think the problem is in data where you are sending data to new page
function addtocart(pid,name,price,buid)
{
alert("addToCart function working");
var pid = pid;
var pname = name;
var pprice = price;
var pqty = document.getElementById("qty").value; //$(#qty).val();
var buid = buid;
//var cstid = $(#).val();
$.ajax({
type:"POST",
url:"http://localhost/phpsales/insert-cart.php",
data:{pid,pname,pprice,pqty,buid},//here is the problem
data:{pid:pid,pname:pname,pprice:pprice,pqty:pqty,buid:build},//this must be like this
cache:false,
success:alert("Product Added Successfully")
//error:function fail(){alert("Some technical error occured dufine product add to cart. Please try after some time.");}
});
}

I think you need to put quotes around your arguments calling the addToCard() function like so:
onclick="addtocart(/''.$row[1].'/',/''.$row[2]./'',/''.$row[3].'/',/''.$buid.'/');"

Why adding dependency causes error in AngularJS?

Working on a web app i am implementing routes , i have added route CDN and when i added ngRoute as a dependency to myApp it is not working now.Before adding ngRoute viewproducts was working fine but now what i am seeing is :
{{product.name}} {{product.company}} and not the actual values.
Module CODE :
var myApp = angular.module('myApp', ['ngRoute']);
myApp.config(function($routeProvider){
$routeProvider.
when('/addproduct', {
templateUrl:'addproduct.html',
controller:'myController'
})
});
Controller CODE :
myApp.controller("myController",function($scope,$http){
$scope.insertData = function(){
$http.post("addProduct.php",{'pname': $scope.productname,'company': $scope.company,'price': $scope.price,'quantity':$scope.quantity})
.success(function(data,status,headers,config){
$scope.successMessage = "Inserted Successfuly!";
});
}
});
HTML CODE:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dashboard</title>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:700, 600,500,400,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="main.css">
<script type="text/javascript" src="js/angular/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</head>
<body ng-controller="myController">
<div class="header">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<span></span>
</div>
<div class="side-nav">
<div class="logo">
<i class="fa fa-tachometer"></i>
<span>Dashboard</span>
</div>
<nav>
<ul>
<li>
<a href="#">
<span><i class="fa fa-user"></i></span>
<span>Users</span>
</a>
</li>
<li>
<a href="addproduct.html">
<span><i class="fa fa-user"></i></span>
<span>Add Product</span>
</a>
</li>
<li>
<a href="viewproducts.html">
<span><i class="fa fa-envelope"></i></span>
<span>View Products</span>
</a>
</li>
<li class="active">
<a href="#">
<span><i class="fa fa-bar-chart"></i></span>
<span>Analytics</span>
</a>
</li>
<li>
<a href="#">
<span><i class="fa fa-credit-card-alt"></i></span>
<span>Payments</span>
</a>
</li>
</ul>
</nav>
</div>
<div class="main-content">
<div class="title">
Add Product
</div>
<div class="main" ng-view>
<form style="padding:10px">
<div class="form-group">
<label for="ProductName">Product Name</label>
<input type="text" class="form-control" placeholder="Product Name" ng-model="productname">
</div>
<div class="form-group">
<label for="company">Company </label>
<input type="text" class="form-control" placeholder="company" ng-model="company">
</div>
<div class="form-group">
<label for="company">Price </label>
<input type="text" class="form-control" placeholder="price" ng-model="price">
</div>
<div class="form-group">
<label for="company">Quantity </label>
<input type="text" class="form-control" placeholder="quantity" ng-model="quantity">
</div>
<button type="submit" class="btn btn-default" ng-click="insertData()">Submit</button>
<h1>{{successMessage}}</h1>
</form>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</html>

It looks like you may be redifining your module.
Do you have the following code elsewhere in your project?
var myApp = angular.module('myApp', [...]);
If you do, the second module call with brackets would redefine the existing module. Try adding the ngRoute dependency to the first module definition and remove the brackets of the one in config. It should then look like below.
var myApp = angular.module('myApp');

The order of your scripts matters! The file where you create your angular module app:
var myApp = angular.module('myApp', ['ngRoute']);
This file should be after the angular-route file.
Fixed:
<script src="js/angular/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-route.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="main.js"></script>
<script src="angularkhan.js"></script>

AngularJS ng-model not working?

I have this index.html which has a navbar in the which is seen on all pages of my single page application. The navbars container div is using the ng-controller="LoginCtrl" value, so I will also include that controller from my angular application (app.js)
For some reason, the variables username and password which are bound via ng-model are showing as undefined when doLogin() is called via ng-click directive? That is after I type values into the text boxes that are bound to my controllers variables.
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
</head>
<body>
<div ng-controller="LoginCtrl">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">TriviaAttack!</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form ng-if="!loggedIn" id="loginForm" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" ng-model="username">
</div>
<div class="form-group">
<input type="text" placeholder="Password" class="form-control" ng-model="password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" ng-click="doLogin()">Sign In</button>
</div>
</form>
</div>
</div>
</nav>
<div ng-view></div>
</div>
<script src="./app/app.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js">
</body>
</html>
app.js
...
myApp.controller('LoginCtrl', function($rootScope, $location, AuthService, AuthToken) {
$rootScope.doLogin = function() {
console.log($rootScope.username);
console.log($rootScope.password);
}
});
...

An inputModel primitive property will be created on that ng-controller's scope when you type into the text field. input model is generated in the current scope, not the rootScope.
var app = angular.module('myApp', []);
app.controller('LoginCtrl', function($scope, $http) {
$scope.doLogin = function() {
console.log($scope.username);
console.log($scope.password);
}
});
Check it out on Plunker

Use model rather than using primitive types.
You should use $rootScope.user.name (ng-model will be user.name) rather than using $rootScope.username and $rootScope.user.password(ng-model will be user.password) instead of $rootScope.password
This problem actually happens for javascript's prototypical model. And if you want to know it's applicability in angularjs, you can go through this article. This will definitely help :)
Edit: As you are running into problem making that code work, I've made a working copy of your code. Please have a look at it:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="stylesheet.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-route.min.js"></script>
<base href="/">
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.9/ngStorage.js"></script>
<script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
</head>
<body>
<div ng-controller="LoginCtrl">
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">TriviaAttack!</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<form ng-if="!loggedIn" id="loginForm" class="navbar-form navbar-right">
<div class="form-group">
<input type="text" placeholder="Email" class="form-control" ng-model="user.name">
</div>
<div class="form-group">
<input type="text" placeholder="Password" class="form-control" ng-model="user.password">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success" ng-click="doLogin()">Sign In</button>
</div>
</form>
</div>
</div>
</nav>
<div ng-view></div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
<script>
var myApp = angular.module("myApp", []);
myApp.controller('LoginCtrl', function ($scope, $location) {
$scope.user = { name: "", password: "" };
$scope.doLogin = function () {
console.log($scope.user.name);
console.log($scope.user.password);
}
});
</script>

use $scope instead of $rootScope for getting the ng-model in controller.

I found the answer to my own question after some frustration. Adding username and password arguments to my doLogin() function, then using the directive ng-click="doLogin(user.name, user.pass)" works as I wanted. No clue why it wasn't working the way I was trying, but oh well.

Categories

Resources