select input is not working? Using Single-page-application AngularJS - javascript

I have a single-page application and I have a problem loading things in my UI
So my index.html goes like this
html lang="en" ng-app="App" ng-controller="IndexController">
<head>
<!-- CORE CSS-->
<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/custom/custom.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<script type="text/javascript" src="js/plugins/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="libs/angular/angular.min.js"></script>
<script type="text/javascript" src="libs/angular-route/angular-route.min.js"></script>
<script type="text/javascript" src="libs/angular-utils-pagination/dirPagination.js"></script>
<script type="text/javascript" src="js/materialize-plugins/date_picker/picker.js"></script>
<script type="text/javascript" src="js/materialize-plugins/date_picker/picker.date.js"></script>
<script type="text/javascript" src="js/ngStorage.min.js"></script>
<script type="text/javascript" src="js/plugins/select2.js"></script>
<script type="text/javascript" src="js/controller/IndexController.js"></script>
<script type="text/javascript" src="js/appRoutes.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</head>
<body class="cyan">
*some navbar codes here*
<section id="content">
<div ng-view>
</div>
</section>
</body>
*some scripts here*
</html>
then I have my other pages like this
<section id="content" ng-controller="DashboardController">
*some codes here*
<select required id="names" ng-model="selectedName" ng-class="{invalid : validation.names}" ng-options="x for x in names"></select>
<div class="row">
<div ng-repeat="x in names">
{{x}}
</div>
</div>
<div class="row">
<div class="input-field col s4"></div>
<div class="input-field col s4">
<a class="btn waves-effect waves-light white blue-text" ng-click="cancelRequest()">Cancel</a>
<a class="btn waves-effect waves-light blue" ng-click="transaction()">Save</a>
</div>
<div class="input-field col s4"></div>
</div>
</section>
the thing is I can't use select, radio boxes, check boxes and so on.
In my dashboard controller I have a list named $scope.names where the data are $scope.names = ["Emil", "Tobias", "Linus"]; and it is declared in my init function
as you read you know it should work with the above code right? but...
it is showing with ng-repeat but not in ng-options
Can someone tell me what's wrong? I'm wracking my brains for hours already :(
I also have
$(document).ready(function () {
$('select').material_select();
});
and if I hard coded the <option></option> it wouldn't work unless I put
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript" src="js/plugins/angular-materialize.js"></script>
<script type="text/javascript" src="js/plugins.min.js"></script>
Edit:
.controller('DashboardController', function ($http,$scope,$sessionStorage,StartingService,LogService,SweetAlert) {
(function init() {
$http.defaults.headers.common['Authorization'] = $sessionStorage.authenticate;
$scope.isLogin = $sessionStorage.showLogin;
$sessionStorage.currentBusiness;
$(document).ready(function () {
$('select').material_select();
$('.tooltipped').tooltip({delay: 50});
});

So I think you should use $onInit() like this:
controller: function() {
this.$onInit = function() {
$('select').material_select();
};
},
Or wrap you select initialization on $timeout:
$timeout(() => $('select').material_select());
You don't need wrap code to function
.controller('DashboardController', function ($http,$scope,$sessionStorage,StartingService,LogService,SweetAlert, $timeout) {
$http.defaults.headers.common['Authorization'] = $sessionStorage.authenticate;
$scope.isLogin = $sessionStorage.showLogin;
$sessionStorage.currentBusiness;
$timeout(function () {
$('select').material_select();
$('.tooltipped').tooltip({delay: 50});
});

Related

Functions on header not working - AngularJs & Javascript

I need to put some functions on the header of my site, but the functions just not working...
I'm building my site with AngularJs and Javascript. Next my index.html:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-cookies.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-sanitize.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.62/vfs_fonts.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/test/test.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factories/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
As you can see, i'm calling the header file on the ng-include div.
And the my header.html file:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<a id="admin-logo"><img src="/logo.png" /></a>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3 hide" id="login" align="center">
<button type="button" class="btn btn-user" id="jump-btn">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout">Log out</button>
</div>
So, at this point, everything works fine: the header appears on every page. But if i need a function on the logout button, how can i do it?
I've tried creating a home.js file like next one:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component('adminHead', head);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
})();
And then, added the function on the button with ng-click:
<div class="menu-out">
<button type="button" class="btn btn-logout" id="logout" ng-click="getOut()">Log out</button>
</div>
But the function is not working.
Someone knows why is not working and help me with and example if it's possible, please? If i add the function on the html between script tags works, but i need to find if it's possible with the $scope.
Hope you can help me. Thanx in advance
Declare a controller:
angular
.module('adminApp')
.controller('adminHeadCtrl', headCtrl);
headCtrl.$inject = ["$http", "$scope"];
function headCtrl($http, $scope){
$scope.getOut = function(){
alert('Log out');
}
}
Instantiate the controller with the ng-controller directive:
<div class="menu-out" ng-controller="adminHeadCtrl">
<button type="button" ng-click="getOut()" id="logout">Log out</button>
</div>
For more information, see
AngularJS Developer Guide - Controllers

Call functions from another file AngularJs

How can i call a function from another file in AngularJs? I'm going to use the same header in all my pages, so i need to call the functions that lives in it.
This is my code so far. First, my index:
<!DOCTYPE html>
<html ng-app="adminApp">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Admin test</title>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<link type="text/css" href="app/css/admin.css" rel="stylesheet" />
<link type="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker3.standalone.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Quicksand&display=swap" rel="stylesheet">
<head>
<base href="/">
</head>
<body>
<div ng-include="'app/components/include/header.html'"></div>
<ng-view></ng-view>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.min.js"></script>
<script src="app/app.js"></script>
<script src="app/components/home/admin-home.js"></script>
<script src="app/components/include/header.js"></script>
<script src="app/factory/admin-factory.js"></script>
<script src="app/routes/admin-route.js"></script>
</body>
</html>
Then the app.js:
(function(){
'use strict';
angular
.module('adminApp', ['ngResource', 'ngRoute']);
})();
The HTML for the header:
<section class="admin-header">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9">
<h1>Admin test</h1>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3" id="login" align="center">
<button type="button" class="btn btn-user" ng-click="open()">
<span class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span>
</button>
</div>
</div>
</section>
<div class="menu-out">
<button type="button" class="btn btn-logout">Logout</button>
</div>
Everything until here is ok. Now my doubt is how to call a funtion to toggle the .menu-out div if the header will be separated as all the pages that will live in it?
I've tried with the file header.js like this:
(function(){
var head = {
templateUrl: '/app/components/include/header.html',
controller: headCtrl
};
angular
.module('adminApp')
.component([], head);
headCtrl.$inject = ["$scope"];
function headCtrl($scope){
$scope.open = function(){
$('.menu-out').toggle();
}
}
})();
But is not working. As you can see i've added the brackets in component, 'cause i don't know if i need to call the header from the routes.js file.
This is the route.js file:
(function(){
'use strict';
angular
.module('adminApp')
.config(config);
config.$inject = ["$routeProvider", "$locationProvider"];
function config($routeProvider, $locationProvider){
$locationProvider.hashPrefix('');
$routeProvider
.when('/', {
template: '<admin-home></admin-home>'
})
.otherwise({
redirectTo: '/'
});
}
})();
I need to use $rootScope? Someone can guide me please. As i've said, i'm using AngularJs, HTML and Javscript.
Thanks in advance.
The first argument of the module.component method should be a string to name the component:
angular
.module('adminApp')
̶.̶c̶o̶m̶p̶o̶n̶e̶n̶t̶(̶[̶]̶,̶ ̶h̶e̶a̶d̶)̶;̶
.component("adminHome", head);
For more information, see
AngularJS angular.module Type API Reference - component

script src not loading javascript for angular

HTML
<!DOCTYPE html>
<html ng-app="dropApp">
<head>
<meta charset="utf-8" />
<title>DropBox</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
</head>
<body ng-controller="mainctrl">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<a id="btn-login" ng-click="login()" ng-model="logbut" ng-show="logbut" class="btn btn-success">Login </a>
<div ng-include="template"></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
Amey Totawar
</p>
</div>
<script src="angularsrc.js"></script>
</body>
</html>
Javascript File
var dropApp = angular.module("dropApp",[]);
var path = require('path');
dropApp.controller("mainctrl", function($scope) {
$scope.logbut = true;
$scope.login = function() {
$scope.logbut = false;
$scope.template = {
name: 'login.html',
url: path.join(__dirname,'views','login.html')
};
}
});
Getting Error:
GET http://localhost:8600/angularsrc.js net::ERR_ABORTED and hence angular module not found.
I tried including min.jquery earlier.
I also tried changing angularsrc.js location, but nothing is working.
Please help!!
<!DOCTYPE html>
<html ng-app="dropApp">
<head>
<meta charset="utf-8" />
<title>DropBox</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="angularsrc.js"></script>
</head>
<body ng-controller="mainctrl">
<div class="jumbotron">
<div class="container">
<div class="col-sm-8 col-sm-offset-2">
<a id="btn-login" ng-click="login()" ng-model="logbut" ng-show="logbut" class="btn btn-success">Login </a>
<div ng-include="template"></div>
</div>
</div>
</div>
<div class="credits text-center">
<p>
Amey Totawar
</p>
</div>
</body>
</html>
and your js is same
var dropApp = angular.module("dropApp", []);
var path = require('path');
dropApp.controller("mainctrl", function ($scope) {
$scope.logbut = true;
$scope.login = function () {
$scope.logbut = false;
$scope.template = {
name: 'login.html',
url: path.join(__dirname, 'views', 'login.html')
};
}
});
This is what you exactly looking for
Your references should be inside head like
<html ng-app="dropApp">
<head>
<meta charset="utf-8" />
<title>DropBox</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.js"></script>
<script src="angularsrc.js"></script>
</head>
<body ng-controller="mainctrl">
{{your code or logic goes here}}
</body>
</html>

Error: $controller:ctrlreg A controller with the name 'HeaderCntrl' is not registered

I have written an angular js program and I have written the controller in a different file but I am getting the error saying that controller is not registered. can someone let me know why i am getting this.
<html ng-app>
<head>
<title>The angular book libraty</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="header-wrapper" ng-controller="HeaderCntrl">
<span class="logo pull-left">{{appDetails.title}}</span>
<span class="tagline pull-left">{{appDetails.tagline}}</span>
<div class="nav-wrapper pull-left">
<ul class="nav nav-pills">
<li class="active">Book</li>
<li>Kart</li>
</ul>
</div>
</div>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
</body>
</html>
And the controller code, that is written in the separate js file.
var HeaderCntrl = function($scope){
$scope.appDetails = {
title : "BookKart",
tagline : "The collection of a million books"
};
}
Your controller is just a function. You need to use a module to create it. An example from ng docs:
var myApp = angular.module('myApp',[]);
myApp.controller('GreetingController', ['$scope', function($scope) {
$scope.greeting = 'Hola!';
}]);
And then
<div ng-controller="GreetingController">
{{ greeting }}
</div>
order of injected js file is wrong
change this
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
to
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
this demo is your post. just change order of injected file.
Demo
I was following an old module for reference without being aware of it and the app was working fine in the guide I was using, I guess it is deprecated now. I used following code to get the proper output.
<html ng-app="myApp">
<head>
<title>The angular book libraty</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="app.css">
</head>
<body>
<div id="header-wrapper" ng-controller="myCtrl">
<span class="logo pull-left">{{ title }}</span>
<span class="tagline pull-left">{{tagline}}</span>
<div class="nav-wrapper pull-left">
<ul class="nav nav-pills">
<li class="active">Book</li>
<li>Kart</li>
</ul>
</div>
</div>
<script src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
the external js file I used for the controller is as follows.
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.title = "BookKart";
$scope.tagline = "We have a million book with us";
});

Display the name of the product inside the <h3> tag

I am learning angular js
I am doing small tasks..
but I am getting this error Display the name of the product inside
the tag.
can you tell me how to fix it
providing my code below
html
<!DOCTYPE html>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController as store">
<div class="product row">
<h3>
{{store.product.name}}
<em class="pull-right"></em>
</h3>
</div>
</body>
</html>
js
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController',function(){
this.product = gem;
});
})();
You should use the $scope:
app.controller('StoreController',function($scope){
$scope.product = gem;
});
{{product.name}}
Please try the following snippet.
(function(){
var gem = { name: 'Azurite', price: 2.95 };
var app = angular.module('gemStore', []);
app.controller('StoreController',function($scope){
$scope.product = gem;
});
})();
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-app="gemStore">
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body ng-controller="StoreController">
<div class="product row">
<h3>
{{product.name}}
<em class="pull-right"></em>
</h3>
</div>
</body>
</html>

Categories