I have a tab structure made of ng-reapet which shows the content of each tab in a panel (the same one but diff content). I have added
<div ng-controller="myCtrl">
<div ng-include="'tpl.html'">
</div>
</div>
in each tab-panel to display the content according to selected tab and its fine, but when i click on submit within the html(after filling the fields there) I want the ng-include to be replaced with another html (the submit results) template and his controller.
Now i am doing $state.go("url") and its taking me to another page and using route refresh the page.
Try this out,
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div ng-controller="switchCtrl">
<input type='button' ng-value='buttonText' ng-click="doEdit()" />
<div ng-include="template.url"></div>
</div>
</body>
</html>
Controller.js
var app = angular.module('myApp', []);
app.controller('switchCtrl', function($scope) {
$scope.templates = [{
name: 'template-one.html',
url: 'template-one.html'
}, {
name: 'template-two.html',
url: 'template-two.html'
}];
$scope.hasPermissionToEdit = true;
$scope.buttonText = 'Edit';
$scope.isEditing = false;
$scope.shared = 'shared value between templates.';
$scope.template = $scope.templates[0];
$scope.doEdit = function() {
if ($scope.isEditing) {
$scope.template = $scope.templates[0];
$scope.isEditing = false;
$scope.buttonText = 'Edit';
} else {
if ($scope.hasPermissionToEdit) {
$scope.template = $scope.templates[1];
$scope.isEditing = true;
$scope.buttonText = 'Go back';
} else {
alert('you don\'t have permission to edit');
}
}
}
});
Hope this helps !!
Related
I am new to HTML and Javascript. I am trying to display feedback on my form, so when a user types a matching password and username to what I have in my UserList object, it returns "login successfull" but I cant get this to work.
Heres a plunker if you want to see it in action: https://plnkr.co/plunk/SRS21GqLPAVgA5JU
Heres my code:
var app = angular.module('plunker', []);
app.controller('MainCtrl', ['$scope', '$http', function($scope, $http){
$scope.test = "Test Successful!";
$scope.target = 'https://happybuildings.sim.vuw.ac.nz/api/brownsol/user_list.json'
// retrieves userList JSON file from server
$http.get($scope.target)
.then(function successCall(response){
$scope.output = "Successfully retrieved userList from the server"
$scope.userList = response.data.users;
},
function errorCall(response){
$scope.output = "Error retrieving userList from the server "
$scope.output += " - ErrorCode = "
$scope.output += response.status;
});
$scope.loginValidator = function() {
for(var i = 0; i < userList.length; i++) {
if ($scope.usernameInput == userList[i].LoginName && $scope.passwordInput == userList[i].Password) {
$scope.feedback = 'Login Successful';
return true;
};
};
$scope.feedback = 'Login Failed';
};
}]);
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="style.css">
<script data-require="angular.js#1.4.x" src="https://code.angularjs.org/1.4.12/angular.js" data-semver="1.4.9"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<p>{{test}}</p>
<p>{{output}}</p>
<p>{{userList}}</p>
<div>
<form>
log in
<input type = "text" placeholder = "username" ng-model = "usernameInput"></input>
<input type = "password" placeholder = "password" ng-model = "passwordInput"></input>
<button type = "submit" placeholder = "login" ng-click = "loginValidator()">login</button>
<p>{{feedback}}</p>
</form>
</div>
<p>the first username: {{userList[0].LoginName}}</p>
<p>the first password: {{userList[0].Password}}</p>
</body>
</html>
Typo in function $scope.loginValidator. Instead of $scope.userList, You have used userList Which is not defined. Check console for error.
$scope.loginValidator = function() {
for(var i = 0; i < $scope.userList.length; i++) {
if ($scope.usernameInput == $scope.userList[i].LoginName && $scope.passwordInput == $scope.userList[i].Password) {
$scope.feedback = 'Login Successful';
return true;
};
};
I follow the "AngularJS: Get Started" course from Plualsight, and I reach the Routing module, so I have some files in Plunker, on the course they can see on Preview page the title which is "Github Viewer" and a search bar. But I still get errors in console, and I do not know why, my code should be identical as their code.
So I have the following files :
app.js
(function() {
var app = angular.module('githubViewer', ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo: "/main"});
});
}());
github.js
(function() {
var github = function($http) {
var getUser = function(username) {
return $http.get("https://api.github.com/users/" + username)
.then(function(response) {
return response.data;
});
};
var getRepo = function(user) {
return $http.get(user.repos_url)
.then(function(response) {
return response.data;
});
};
return {
getUser : getUser,
getRepo : getRepo
};
};
var module = angular.module("githubViewer");
module.factory("github", github);
}());
index.html
<!DOCTYPE html>
<html ng-app="githubViewer">
<head>
<script data-require="angular.js#*" data-semver="1.3.14" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script data-require="angular-route#*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script scr="app.js"></script>
<script src="MainController.js"></script>
<script src="github.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view></div>
</body>
</html>
main.html
<div>
{{ countdown }}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required="" ng-model="username" />
<input type="submit" value="Search" />
</form>
</div>
MainController.js
// Code goes here
(function() {
var app = angular.module("githubViewer");
var MainController = function($scope, $interval, $location) {
console.log("Atentie!")
var decrementCountdown = function() {
$scope.countdown -= 1;
if ($scope.countdown < 1) {
$scope.search($scope.username);
}
};
var countdownInterval = null;
var startCountdown = function() {
countdownInterval = $interval(decrementCountdown, 1000, $scope.countdown);
};
$scope.search = function(username) {
if (countdownInterval) {
$interval.cancel(countdownInterval);
$scope.countdown = null;
}
//
};
$scope.username = "Angular";
$scope.countdown = 5;
startCountdown();
};
app.controller("MainController", MainController);
}());
userdetails.html
<div id="userDetails">
<h2>{{user.name}}</h2>
<img ng-src="{{user.avatar_url}}" title="{{user.name}}">
<div>
Order:
</div>
<select ng-model="repoSortOrder">
<option value="+name">Name</option>
<option value="-stargazers_count">Stars</option>
<option value="+language">Language</option>
</select>
</div>
<table>
<thead>
<tr>
<th>Name</th>
<th>Stars</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="repo in repos | limitTo:10 | orderBy:repoSortOrder">
<td>{{repo.name}}</td>
<td>{{repo.stargazers_count | number }}</td>
<td>{{repo.language}}</td>
</tr>
</tbody>
</table>
And the style.css which is empty.
So at this point I should see in a separete window something like in the following picture and no errors in console.
But I se only the title, like in the following picture
and errors
Could someone help me to understand why isnt' work ?
Was some changes in AngularJS and the course isn't up to date ?
You made a typo
<script scr="app.js"></script>
should be
<script src="app.js"></script>
Also make sure that when using angularjs core api's, all the API should be off same version. Here you're using angularjs (ver. 1.3.12) & angular-route (ver. 1.6.2)
Change both to 1.6.2 or latest
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
Demo Here
my code:
<button id="btnajs" ng-click="AppendText()">Using angularjs</button>
<div id="divID"></div>
<script>
var count=1;
function myCtrl($scope) {
$scope.AppendText = function() {
var myEl = angular.element( document.querySelector( '#divID' ) );
myEl.append("<tr><td><button type='submit' name='id_"+count+"' class='newbtn' id='"+count+"' data-toggle='modal' data-target='#mymodal'>{{bn}}</button></td></tr>");
count++;
}
}
var myapp=angular.module("myapp",[]);
myapp.controller('btncontrol',function($scope){
$scope.bn="Save data";
$scope.save=function(){
$scope.bn= "Saving data...";
};
});
</script>
The button "angular js" is to be clicked and then more buttons are appended below it.. i want to be able to change the names of those appended buttons
to "save data" and after clicking on the same button change to "saving data..", but it only appears as {{bn}}.
I have added all the necessary libraries.
How about something like that
var app = angular.module('my-app', [], function() {});
app.controller('AppController', function($scope) {
$scope.toggle = true;
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="my-app" ng-controller="AppController">
<button ng-click="toggle = !toggle">
<span ng-show="toggle">Save Data</span>
<span ng-hide="toggle">Saving Data</span>
</button>
</div>
You do not have to use jquery way,
Just change the scope variable on button click using function.
$scope.AppendText = function(){
$scope.bn = "saving data";
}
DEMO
var app = angular.module('todoApp', []);
app.controller("dobController", ["$scope",
function($scope) {
$scope.bn = "Save data";
$scope.AppendText = function(){
$scope.bn = "saving data";
}
}
]);
<!DOCTYPE html>
<html ng-app="todoApp">
<head>
<title>To Do List</title>
<link href="skeleton.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.min.js"></script>
</head>
<body ng-controller="dobController">
<button ng-click="AppendText()"> {{bn}}</button>
</body>
</html>
No need to use $scope.save in this code. Also write the html part seperate. if you want to code exactly as yours. please call save() in myEl.append.
When page refresh I want to return data from scope to textbox value. How can I do it with only update button?
Example: Plunker
Make this changes in your plunker index.html
<script>
angular.module("example", ["ngStorage"])
.controller("ExampleController", function($scope, $localStorage) {
$scope.save = function() {
$localStorage.message = $scope.zafer;
console.log(zafer);
}
$scope.load = function() {
$scope.zafer = $localStorage.message;
}
})
</script>
</head>
<body ng-app="example">
<div ng-controller="ExampleController" ng-init="load()">
<input type="text" ng-model="zafer">
<button ng-click="save()">Update</button>
</div>
</body>
I am trying to use my scope values in my head title tag. This is external to the body element that has my controller. IS there a way to do this?
Here is my HTML:
<!DOCTYPE html>
<html ng-app="soCLean">
<head>
<title>{{locale}} {{type}} {{service}}</title>
</head>
<body ng-controller="soCleanLandingPage">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var soClean = angular.module('soClean', []);
soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
$scope.locale = 'vancouver';
$scope.type = 'residential';
$scope.service = 'pressure washing';
$scope.serviceSingle = 'pressure wash';
}]);
</script>
</body>
</html>
Thanks for your help.
Just move your ng-controller to the html element.
http://plnkr.co/edit/xImv48BvoW2Y9Ibb9JTq?p=preview
(You can see the values in head in the debugger)
<!DOCTYPE html>
<html ng-app="soClean" ng-controller="soCleanLandingPage">
<head>
<title>{{locale}} {{type}} {{service}}</title>
</head>
<body >
<div>
<p>{{locale}}</p>
<p>{{type}}</p>
<p>{{service}}</p>
<p>{{serviceSingle}}</p>
</div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
<script>
var soClean = angular.module('soClean', []);
soClean.controller('soCleanLandingPage', ['$scope', function ($scope) {
$scope.locale = 'vancouver';
$scope.type = 'residential';
$scope.service = 'pressure washing';
$scope.serviceSingle = 'pressure wash';
}]);
</script>
</body>
</html>
You can use the $rootScope:
app.run(function($rootScope){
$rootScope.locale = "en";
$rootScope.type = "something";
$rootScope.service = "another";
});
You can also use a fancy directive:
app.directive('title', function(){
return {
restrict: 'E',
scope:{},
template: "{{locale}} {{type}} {{service}}",
link: function(scope){
scope.locale = "en";
scope.type = "something";
scope.service = "another";
}
}
});
Check this plunker: http://plnkr.co/edit/JRblEkKaOCLNC2O7r9s4?p=preview