this is the index.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>index</title>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular-route.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="icon" href="data:;base64,=">
<style>
</style>
</head>
<body>
<ul class="papa">
<li>input</li>
<li>output</li>
</ul>
<ng-view></ng-view>
<script>
var app1 = angular.module('myApp', ['ngRoute']);
app1.config(['$routeProvider', '$locationProvider',function($routeProvider, $locationProvider) {
$routeProvider
.when('/1_input', {
controller: 'input_control',
templateUrl: '/1_input.html'
})
.when('/2_output/:firstnamehh/:lastnamehh', {
controller: 'output_control',
templateUrl: '/2_output.html'
})
.otherwise({redirectTo:'/1_input'});
$locationProvider.html5Mode({ enabled: true, requireBase: false });
}]);
app1.controller('input_control',function($scope, $location){
//$scope.init_table = {name1:"", name2:""};
//$scope.score_card = [];
//
$scope.loadView2 = function(){
// $scope.score_card.push({
// name1: $scope.firstnamehh,
// name2: $scope.lastnamehh
// })
// console.log($scope.score_card);
$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
//$location.path('/2_output/'+$scope.firstnamehh+'/'+$scope.lastnamehh);
//$location.path('/2_output/'+$scope.score_card;
//$location.path('/2_output/'+$scope.firstnamehh+$scope.lastnamehh+$scope.score_card);
//$location.path('/2_output/'+$scope.score_card);
}
});
app1.controller('output_control',function($scope, $routeParams){
$scope.name1=$routeParams.firstnamehh;
$scope.name2=$routeParams.lastnamehh;
//$scope.name2=$routeParams.({?name1=$scope.firstnamehh});
//$scope.out_score=$routeParams.score_card;
//$scope.name3 = $routeParams[score_card];
});
</script>
</body>
</html>
this is the 1_input.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>1_input</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
First name: <input type="text" ng-model="firstnamehh"/> <br/>
Last name: <input type="text" ng-model="lastnamehh"/> <br/>
<button ng-click="loadView2()">to output page</button>
</body>
</html>
this is the 2_output.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>2_output</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
From View2.
<ul>
<li>{{name1}}</li>
<li>{{name2}}</li>
<!-- <tr ng-repeat="aa in score_card">
<td>{{aa.name1}}</td>
<td>{{aa.name2}}</td>
</tr> -->
</ul>
</body>
</html>
hello guys, i'm new to angularjs and looking for some help!. What I'm trying is, making firstnamehh and lastnamehh as a list and pass it to 2_output.html and finally print it out in a table. The part I'm struggling is what should i put after $routeParams and $location.path().
$routeParams.???
..
$location.path('/2_output/'+$scope.???);
any advice would be appreciated!! thank you for reading this question
You can achieve this by using service
app.factory('DataService', function() {
var appData = {}
function set(data) {
appData = data;
}
function get() {
return appData;
}
return {
set: set,
get: get
}
}
In your input_control you can set the data to the service :
DataService.set(shredData);
In your output_control get the data from ther service :
$scope.appdata = DataService.get();
Inject DataService in the controllers by passing it as a parameter
app.controller('input_control', ['DataService', function($scope, $location, DataService){
//Your logic
}]);
Related
I done this code using tutorial but it does not work, it simply does open pop-up to enter your credentials for google. What is wrong with this 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.0">
<title>Document</title>
</head>
<body>
<button id="sign-in-button">Sign in</button>
<script src="https://apis.google.com/js/api.js"></script>
<script>
gapi.auth2.init({
client_id: "655720894976-2rkkoov9efteqna8hq3vbc632brur2jf.apps.googleusercontent.com"
});
document.getElementById("sign-in-button").addEventListener("click", function() {
// Get an authorization code
gapi.auth2.getAuthInstance().grantOfflineAccess({
scope: "https://www.googleapis.com/auth/cloud-platform"
}).then(function(response) {
var authorizationCode = response.code;
});
});
</script>
</body>
</html>
I have an HTML file linked to a script. A button defined in the HTML has an onclick function 'incrementLabel()' but the function in the script throws the warning:
'incrementLabel' is declared but its value is never read.
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
<!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.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
I can't find any solutions to the problem other than writing the function in a in HTML. Any help would be much appreciated.
Thanks!
<!DOCTYPE HTML>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
<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.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
</body>
</html>
This works perfectly fine. Check if you are importing your JS script correctly.
You can put the javascript code into a before the closing tag .
HTML:
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<script src="js/Main.js"></script>
<title>Test Web App</title>
</head>
<body>
<button onclick="incrementLabel()">Test</button>
<label id="testLabel">0</label>
<script>
function incrementLabel() {
var text = document.getElementById("testLabel").textContent;
document.getElementById("testLabel").innerText = (parseInt(text) + 1);
}
</script>
</body>
Some of online tools like https://playcode.io don't recognise your code but I have tested in vscode and works fine.
Maybe have to use other online tool or can test if you have imported the code well with a console.log("Works fine") into your javascript file.
Sorry for my english.
I am trying to create the sample angular application, where I have initialized an angular application and rendering a list defined in the controller, but I am not getting anything in output, and even not getting any error in javascript console.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl">
<ul>
<li ng-repeat="i in listctrl.list">{{i}}</li>
</ul>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
var list = ['A','B','C','D'];
})
</script>
</body>
</html>
You should have listctrl.list instead of var list = ['A','B','C','D'];
listctrl.list = ['A','B','C','D'];
DEMO
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="ListController as listctrl">
<ul>
<li ng-repeat="i in listctrl.list">{{i}}</li>
</ul>
</div>
<script type="text/javascript">
angular
.module('myApp',[])
.controller('ListController', function($scope) {
var listctrl = this;
listctrl.list = ['A','B','C','D'];
})
</script>
</body>
</html>
I'm trying to display some view, on any calling URL.
$stateProvider.state('test', {
url: '',
views: {
'testView#' : {
templateUrl: '/app/test/test.html',
controller: 'test.controller',
controllerAs: 'testVM'
}
}
});
I've tried url: '' and with no url attribute, but my view is never displayed. It only works when it has a specific url like url: '/'
Here is my index.html
<!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>Mock App</title>
<!-- Import additional "vendor" css here -->
<link rel="stylesheet" href="resources/styles/bundle-GENERATED-VERSION.min.css">
</head>
<body>
<h1>Test</h1>
<div data-ui-view="testView"></div>
<script src="app/bundle-GENERATED-VERSION.min.js"></script>
</body>
</html>
How can I do this ?
If you want to match every url that starts with /
you can try something like url:'/*path'
https://github.com/angular-ui/ui-router/wiki/URL-Routing#regex-parameters
There is a nice solution here for How to make a On/Off button in Ionic
Here's a demo from Codepen
and the code pasted here:
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl',function($scope) {
$scope.someFunction = function(){
alert('I am pressed')
}
});
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-model="button" ng-click="button.clicked=!button.clicked" ng-class="button.clicked?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>
My question is how to execute someFunction() on the same ng-click event of the Confirm button which could be like this ng-click="someFunction() && button.clicked=!button.clicked" ?
Instead of using the ; separator, you could move all the logic into someFunction(), and set that function as the expression to the ng-click attribute:
angular.module('mySuperApp', ['ionic'])
.controller('MyCtrl', function($scope) {
$scope.buttonOn = false;
$scope.someFunction = function() {
$scope.buttonOn = (!$scope.buttonOn);
alert('I am pressed');
}
});
<html ng-app="mySuperApp">
<head>
<meta charset="utf-8">
<title>
Toggle button
</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
</head>
<body class="padding" ng-controller="MyCtrl">
<button class="button button-primary" ng-click="someFunction()" ng-class="buttonOn?'button-positive':'button-energized'">
Confirm
</button>
</body>
</html>