Here is the list of users. I need to display particular user details when clicked on him.
<head>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
}]);
}());
</script>
<style></style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<h1> PERSONS</h1>
<form name="commonForm">
<div class="col-sm-4" ng-repeat="user in userData.results" ng-class="{active : isSelected(user)} style="margin-top:50px;">
<img class="col-sm-4" ng-src="{{user.picture.large}}"/>
<div class="col-sm-8">
<div ><a ng-click="clickMe(p)" class="clickable"><b>{{user.name.first}} {{user.name.last}}</b></a></div>
<div>{{user.email}}</div>
<div>{{user.location.street}},{{user.location.city}},{{user.location.state}},{{user.location.postcode}}</div>
</div>
</div>
</form>
</div>
</body>
Also check the following link for the demo - https://plnkr.co/edit/J70FKDpdXUtg1AfiVkcz?p=preview
I need to display a particular user's data when we click on the user.
Below is the working example for the same
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<link data-require="bootstrap#3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<script data-require="angular.js#1.6.6" data-semver="1.6.6" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
<script>
(function() {
angular.module("testApp", ['ui.bootstrap']).controller('testCtrl', ['$scope', '$http', function($scope, $http) {
$scope.userData = undefined;
$scope.selectedUser = undefined;
$http.get('https://randomuser.me/api/?results=30&nat=US').then(function(response) {
$scope.userData = response.data;
});
$scope.selectUser = function(usr){
$scope.selectedUser=usr;
};
}]);
}());
</script>
<style>
.userInfo{
border: 1px solid #ccc;
margin-top:10px;
padding:5px;
cursor: pointer;
}
.userInfo:hover{
background: #ccc;
}
.profile{
padding-left: 0px;
padding-right: 0px;
}
.ellipsis{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body ng-app="testApp">
<div ng-controller="testCtrl">
<form name="commonForm">
<div ng-hide="selectedUser">
<div class="col-sm-4 userInfo" ng-repeat="user in userData.results" ng-click="selectUser(user)" >
<img class="col-sm-4 profile" ng-src="{{user.picture.medium}}"/>
<div class="col-sm-8">
<div class="ellipsis"><b>{{user.name.first}} {{user.name.last}}</b></div>
<div class="ellipsis">{{user.email}}</div>
</div>
</div>
</div>
<div ng-show="selectedUser">
<button ng-click="selectedUser = undefined">Go Back</button>
<br />
<br />
<img class="col-sm-4 profile" ng-src="{{selectedUser.picture.large}}"/>
<div class="col-sm-4">
<div class="form-group">
<label for="first">First Name:</label>
<input type="text" class="form-control" id="first" ng-model="selectedUser.name.first">
</div>
<div class="form-group">
<label for="last">Last Name:</label>
<input type="text" class="form-control" id="last" ng-model="selectedUser.name.last">
</div>
<div class="form-group">
<label for="username">Login:</label>
<input type="text" class="form-control" id="username" ng-model="selectedUser.login.username" disabled>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="text" class="form-control" id="email" ng-model="selectedUser.email">
</div>
<div class="form-group">
<label for="dob">Date of Birth:</label>
<input type="text" class="form-control" id="dob" ng-model="selectedUser.dob">
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="nat">Nationality:</label>
<input type="text" class="form-control" id="nat" ng-model="selectedUser.nat">
</div>
</div>
</div>
</form>
</div>
</body>
</html>
Related
While switching back and forth with the radio buttons, the form values get reset. Why does $scope.user reset and does not stay persistent?
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) {
$scope.radio_test = "0";
$scope.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
Use the controller as syntax (Run the below snippet in order to see how it fixes the issue).
In your code you would need to change:
1- This
$scope.radio_test="0";
$scope.user="John Doe";
to
var vm = this;
vm.radio_test = "0";
vm.user = "John Doe";
2- This: ng-controller="myCtrl" to ng-controller="myCtrl as vm"
3- And every where you were accessing anyVar in the view (and in controller $scope.anyVar) to vm.anyVar (in the view and the controller).
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) { // there is no need to use the $scope any more
var vm = this;
vm.radio_test = "0";
vm.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div ng-app="myApp" ng-controller="myCtrl as vm" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="vm.radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="vm.radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="vm.user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
Setting your ng-model on the input to $parent.user seems to do the trick.
var app = angular.module("myApp", ["ui.bootstrap"]);
app.controller(
"myCtrl",
function($scope) {
$scope.radio_test = "0";
$scope.user = "John Doe";
}
);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<body>
<div ng-app="myApp" ng-controller="myCtrl" class="container">
<div class="panel panel-default">
<div class="panel-body">
<div>
<form>
Choose:
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="0">First</label>
<label class="radio-inline"><input type="radio" ng-model="radio_test" value="1">Second</label>
</form>
<br />
<div ng-switch="radio_test">
<div ng-switch-when="0">
<div>
<form ng-app="myApp" name="myForm" class="form-horizontal" novalidate>
<div class="form-group">
<label class="control-label col-sm-2" for="user">Username:</label>
<div class="col-sm-10">
<input type="text" name="user" ng-model="$parent.user" class="form-control" required />
<div style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
<div ng-show="myForm.user.$error.required">Username is required.</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div ng-switch-when="1">
<div>Something Else</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
html Code
<div style="position: absolute; bottom: 0px; width: 100%">
<div style="text-align: center">
<div>
{{great}}
</div>
<form>
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<input type="text" class="form-control input-lg" height="20" placeholder="Add Note" ng-model="searchText">
</label>
<button class="button button-block" ng-click="addTag()">Add Note</button>
</div>
</div>
</form>
app.js
$scope.searchText =" ";
$scope.great = "Note Here";
$scope.addTag = function () {
$scope.great == $scope.searchText;
};
I am trying to add a note to my tasks that I create. Here is my app:
https://behrouz2000.fwd.wf
When you click on the task and click a note it should create that note one on top of each other with a minute time stamp.
When you are assigning you should use one equal
$scope.great = $scope.searchText;
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$scope', function($scope) {
$scope.searchText ="Note Here";
$scope.great = [];
$scope.addTag = function () {
$scope.great = $scope.searchText;
};
}]);
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<script src="https://code.angularjs.org/1.4.7/angular.js"></script>
</head>
<body ng-controller="myCtrl">
<div style="position: absolute; bottom: 0px; width: 100%">
<div style="text-align: center">
<div>
{{great}}
</div>
<div class="list">
<div class="list list-inset">
<label class="item item-input">
<input type="text" class="form-control input-lg" height="20" placeholder="Add Note" ng-model="searchText">
</label>
<button class="button button-block" ng-click="addTag()">Add Note</button>
</div>
</div>
</div>
</div>
</body>
</html>
i have a form in that I added fields dynamically , but when i try to get the unique name it's not working, anyone can help me thanks in advance. Find the below my code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Angular Forms | Form2 </title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="js/angular.js"></script>
<script src="js/jquery-2.0.3.js"></script>
<script src="js/app2.js"></script>
</head>
<body>
<div ng-app="myApp2" ng-controller="myCtrl2">
<div class="container">
<div class="col-sm-9 col-sm-offset-2">
<form name="form1" ng-submit="submitForm2()" enctype="multipart/form-data">
<!--for adding extra fields data-->
{{count}}
<fieldset data-ng-repeat="choice in choices" ng-init="count=0">
<div class="form-group">
<div class="row">
<label class="col-md-2">Skills</label>
<div class="col-md-7">
<input type="text" class="form-control" name="skills" ng-focus="userskills_msg=true" ng-model="user2.skills" placeholder="Enter your skills" />
<p ng-show="errorSkill">{{errorSkill}}</p>
</div>
<div class="col-sm-3 col-md-3"> <span ng-cloak ng-show="userskills_msg"> please choose your location</span> </div>
<button class="remove" ng-show="$last" ng-click="removeChoice()">-</button>
</div>
</div>
</fieldset>
<!--end adding extra fields data-->
<div class="form-group">
<div class="col-md-3"></div>
<div class="col-md-6"> +add another employment<!--<button class="addfields" ng-click="addfields()">Add fields</button>--> </div>
</div>
</div>
</div>
</div>
</body>
</html>
i am initialise a variable using ng-init and i incremented that value in controller value is incrementd but i a not geeting unique names and the file dis not displaying
var sampleApp = angular.module("myApp2", []);
sampleApp.controller("myCtrl2", function ($scope, $http) {
$scope.addfields = function () {
var newItemNo = $scope.choices.length + 1;
$scope.count = newItemNo;
console.log(count);
console.log(newItemNo);
$scope.choices.push({
'id' : 'choice' + newItemNo
});
};
$scope.removeChoice = function () {
var lastItem = $scope.choices.length - 1;
$scope.choices.splice(lastItem);
};
});
This is your code working on plunker.
var sampleApp = angular.module("myApp2", []);
sampleApp.controller("myCtrl2", function ($scope, $http) {
$scope.choices = [];
$scope.count = 0;
$scope.addfields = function () {
var newItemNo = $scope.choices.length + 1;
$scope.count = newItemNo;
console.log($scope.count);
var item = {};
item.id = "choice" + newItemNo;
$scope.choices.push(item);
};
$scope.removeChoice = function () {
var lastItem = $scope.choices.length - 1;
$scope.choices.splice(lastItem);
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body>
<div ng-app="myApp2" ng-controller="myCtrl2">
<div class="container">
<div class="col-sm-9 col-sm-offset-2">
<form name="form1" ng-submit="submitForm2()" enctype="multipart/form-data">
{{count}}
<fieldset data-ng-repeat="choice in choices" ng-init="count=0">
<div class="form-group">
<div class="row">
<label class="col-md-2">Skills</label>
<div class="col-md-7">
<input type="text" class="form-control" name="skills" ng-focus="userskills_msg=true" ng-model="user2.skills" placeholder="Enter your skills" />
<p ng-show="errorSkill">{{errorSkill}}</p>
</div>
<div class="col-sm-3 col-md-3"> <span ng-cloak ng-show="userskills_msg"> please choose your location</span> </div>
<button type="button" class="remove" ng-show="$last" ng-click="removeChoice()">Remove Choice</button>
</div>
</div>
</fieldset>
<div class="form-group">
<div class="col-md-3"></div>
<div class="col-md-6">
<button type="button" class="addfields" ng-click="addfields()">Add fields</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
You have forgotten to initialize the necessary variables to function properly
$scope.choices=[];
$scope.count=0;
And some bad references, example console.log(count); Should be console.log ($ scope.count);
The input fields should NOT directly update the fields (meaning when I type in the input box you should NOT see the badge field update - only after the Submit button is pressed will the fields populate).
//index.html
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Name Badge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-md-6">
<input class="text" placeholder="First Name" ng-model="fName"><br>
<input class="text" placeholder="Email" ng-model="email"><br>
<input class="text" placeholder="Phone" ng-model="phone">
</div>
<div class="col-md-6">
<input class="text" placeholder="Last Name" ng-model="lName"><br>
<input class="text" placeholder="Place of Birth" ng-model="birth"><br>
<input class="text" placeholder="Favorite Food" ng-model="food">
</div>
</div>
<textarea ng-model="about">Tell us about yourself</textarea><br>
<button class="btn" type="submit" ng-submit="info()">Submit</button>
<br><br>
<br><br><br><br>
<div class="row">
<div class="col-xs-6">
<h3>Name: {{fName}} {{lName}}</h3>
<h3>Place of Birth: {{birth}}</h3>
<h3>Email: {{email}}</h3>
</div>
<div class="col-xs-6">
<h3>Phone: {{phone}}</h3>
<h3>Favorite Food: {{food}}</h3>
</div>
</div>
<textarea>{{about}}</textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
Here is my app.js
var app = angular.module("MyApp", []);
app.controller("MainController", ['$scope', function ($scope) {
$scope.info = function () {
$scope.fName = fName;
$scope.email = '';
$scope.phone = '';
$scope.lName = '';
$scope.birth = '';
$scope.food = '';
$scope.about = '';
}
}])
Can someone look at my code and help me see what's wrong.
<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>Name Badge</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body ng-controller="MainController">
<div class="container">
<div class="row">
<div class="col-md-6">
<input class="text" placeholder="First Name" ng-model="fName"><br>
<input class="text" placeholder="Email" ng-model="email"><br>
<input class="text" placeholder="Phone" ng-model="phone">
</div>
<div class="col-md-6">
<input class="text" placeholder="Last Name" ng-model="lName"><br>
<input class="text" placeholder="Place of Birth" ng-model="birth"><br>
<input class="text" placeholder="Favorite Food" ng-model="food">
</div>
</div>
<textarea ng-model="about">Tell us about yourself</textarea><br>
<button class="btn" type="submit" ng-submit="info()">Submit</button>
<br><br>
<br><br><br><br>
<div class="row">
<div class="col-xs-6">
<h3>Name: {{fName1}} {{lName1}}</h3>
<h3>Place of Birth: {{birth1}}</h3>
<h3>Email: {{email1}}</h3>
</div>
<div class="col-xs-6">
<h3>Phone: {{phone1}}</h3>
<h3>Favorite Food: {{food1}}</h3>
</div>
</div>
<textarea>{{about}}</textarea>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script>
<script src="app.js"></script>
</body>
</html>
js file is
var app = angular.module("MyApp", []);
app.controller("MainController", ['$scope', function ($scope) {
$scope.info = function () {
$scope.fName1 = $scope.fName1;
$scope.email1 = $scope.email;
$scope.phone1 = $scope.phone;
$scope.lName1 = $scope.lName;
$scope.birth1 = $scope.birth;
$scope.food1 = $scope.food;
$scope.about1 = $scope.about;
}
}])
I am writing a HTML page using Bootstrap and AngularJS to capture details of an order, and when the page has finished loading it jumps up so that the header of the panel is hidden under the bootstrap navbar.
This isn't what I was expecting. See this plunkr for an example of what I want to achieve. It shows the panel header and the focus is on the Order Ref field as expected and the page doesn't move up at all.
I have tried to create a plunkr that uses AngularJS to demonstrate the issue, but I couldn't get it to run properly so I decided to show the same plunked code in the hope that someone has come across this before.
<!-- Orders.html -->
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<link href="site.css" rel="stylesheet">
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<title>Portal</title>
</head>
<body>
<header class="bs">
<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" rel="home" href="#">Portal</a>
</div>
<div class="collapse navbar-collapse">
<div class="nav navbar-nav navbar-right">
<div class="navbar-text">Search</div>
<form class="navbar-form navbar-left" role="search">
<div class="input-group">
<input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</div>
</div>
</nav>
</header>
<div class="container">
<form name="form" class="form-horizontal" confirm-on-exit>
<div class="panel panel-primary">
<div class="panel-heading">
Create New Order
</div>
<div class="panel-body">
<div class="form-group">
<label for="inputOrderRef3" class="col-sm-2 control-label">Order Ref</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderRef3" placeholder="Order Ref" ng-model="order.orderRef" maxlength="6" required autofocus>
</div>
</div>
<div class="form-group">
<label for="inputOrderDate3" class="col-sm-2 control-label">Order Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputOrderDate3" ng-model="order.orderDate" required>
</div>
</div>
<div class="form-group">
<label for="inputCustomer3" class="col-sm-2 control-label">Customer</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputCustomer3" placeholder="Customer" ng-model="order.customerName" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderedBy3" class="col-sm-2 control-label">Ordered By</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderedBy3" placeholder="Ordered By" ng-model="order.orderedBy" maxlength="3" required>
</div>
</div>
<div class="form-group">
<label for="inputInstallationDate3" class="col-sm-2 control-label">Installation Date</label>
<div class="col-sm-10">
<input type="date" class="form-control" id="inputInstallationDate3" ng-model="order.installationDate" required>
</div>
</div>
<div class="form-group">
<label for="inputAddress3" class="col-sm-2 control-label">Address</label>
<div class="col-sm-10">
<textarea id="inputAddress3" class="form-control" rows="4" ng-model="order.address" maxlength="250" required></textarea>
</div>
</div>
<div class="form-group">
<label for="inputTown3" class="col-sm-2 control-label">Town</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputTown3" placeholder="Town" ng-model="order.town" maxlength="30" required>
</div>
</div>
<div class="form-group">
<label for="inputPostcode3" class="col-sm-2 control-label">Postcode</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputPostcode3" placeholder="Postcode" ng-model="order.postcode" maxlength="15" required>
</div>
</div>
<div class="form-group">
<label for="inputOrderNumber3" class="col-sm-2 control-label">Order Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="inputOrderNumber3" placeholder="Order Number" ng-model="order.orderNumber" required>
</div>
</div>
<div class="form-group">
<label for="inputValue3" class="col-sm-2 control-label">Value</label>
<div class="col-sm-10">
<input type="number" class="form-control" id="inputValue3" ng-model="order.value" required>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary" ng-click="saveOrder()">Save Order</button>
<button type="button" class="btn btn-default" ng-click="cancelOrder()">Cancel</button>
</div>
</div>
</div>
</div>
</form>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Copyrights</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2</p>
</div>
</nav>
</body>
</html>
/* site.css */
body {
padding-top: 70px;
padding-bottom: 50px;
}
.huge {
font-size: 40px;
}
.panel-green {
border-color: #5cb85c;
}
.panel-green .panel-heading {
border-color: #5cb85c;
color: white;
background-color: #5cb85c;
}
.panel-green a {
color: #5cb85c;
}
.panel-green a:hover {
color: #3d8b3d;
}
.panel-red {
border-color: #d9534f;
}
.panel-red .panel-heading {
border-color: #d9534f;
color: white;
background-color: #d9534f;
}
.panel-red a {
color: #d9534f;
}
.panel-red a:hover {
color: #b52b27;
}
.panel-yellow {
border-color: #f0ad4e;
}
.panel-yellow .panel-heading {
border-color: #f0ad4e;
color: white;
background-color: #f0ad4e;
}
.panel-yellow a {
color: #f0ad4e;
}
.panel-yellow a:hover {
color: #df8a13;
}
It's quite annoying when the page moves up and creates a poor user experience. As this issue doesn't occur when not using Angular I'm inclined to believe that Angular could be the problem, although I cannot see how.
EDIT
I've updated the plunkr so that it now uses AngularJS and the page doesn't move up. I am wondering if this is because I have the index.html page being rendered by ASP.NET MVC?
<!-- Index.html -->
#{
Layout = null;
}
<!doctype html>
<html lang="en" ng-app="app">
<head>
<meta name="viewport" charset="utf-8" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Orbit Works</title>
#Styles.Render( "~/Content/css/themes/bundle", "~/Content/css/app" )
</head>
<body ng-controller="indexController">
<ptl-header></ptl-header>
<div class="container">
<div ui-view></div>
</div>
<nav class="navbar navbar-default navbar-fixed-bottom text-center" role="navigation">
<div class="container">
<p class="text-muted">© 2015 Michael John Clarke.</p>
<p class="text-muted small">Built using Twitter Bootstrap v3.3.2 and AngularJS v1.3.9</p>
</div>
</nav>
#Scripts.Render( "~/bundles/script/libraries" )
#Scripts.Render( "~/bundles/script/app" )
</body>
</html>
Adding autoscroll="untrue" to the ui-view directive stops the page from scrolling to the child ui-view as described here.
<div ui-view autoscroll="untrue"></div>