I have to change the content of the button to ON on mouseenter and to OFF on mouseleave using Angular.
<html ng-app="myApp" ng-controller="homeCtrl">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('homeCtrl', function ($scope) {
$scope.alert = function () {
this.myHTML = OFF;
};
$scope.text = function () {
this.myHTML = ON;
};
})
</script>
</head>
<body>
<button ng-mouseenter="alert();" ng-mouseleave="text();"> OFF </button>
</body>
</html>
$scope.alert = function () {
$scope.text = 'OFF';
};
$scope.text = function () {
$scope.text = 'ON';
};
and
<button ng-mouseenter="alert();" ng-mouseleave="text();">{{text}}</button>
Why not use binding instead?
<html ng-app="myApp" ng-controller="homeCtrl">
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('homeCtrl', function ($scope) {
$scope.alert = function () {
$scope.value = "OFF";
};
$scope.text = function () {
$scope.value = "ON";
};
$scope.value="OFF"
})
</script>
</head>
<body>
<button ng-mouseenter="alert();" ng-mouseleave="text();"> {{value}} </button>
</body>
</html>
Related
I just started to learn Angular, and I tried to make concat var name so I can control it dynamically.
This is what I tried -
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc(1)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe1 = false;
$scope.myFunc = function(x) {
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope.nametocng = !$scope.nametocng;
}
});
</script>
use $scope[variable] for dynamic.
From your comment: In the end, I want to make multiple Toggles, but I want one function for all of them. and then, every button will handle one toggle
You can use ng-repeat for button to handle different menu's
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-repeat="button in array" ng-click="myFunc(button)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza1</div>
<div>Pasta1</div>
<div>Pesce1</div>
</div>
<div ng-show="showMe2">
<h1>Menu:</h1>
<div>Pizza2</div>
<div>Pasta2</div>
<div>Pesce2</div>
</div>
{{nametocng}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.array = [1,2];
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.myFunc = function(x) {
angular.forEach($scope.array, function(value, key){
$scope['showMe'+value] = false
});
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope[nametocng] = !$scope[nametocng];
}
});
</script>
</body>
</html>
Please run the above snippet
Here is a DEMO
If you have a dynamic variable name, you need to access via [] syntax. It will evaluate the variable's value and use that value as a property name.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="myFunc(1)">Click Me!</button>
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.showMe1 = false;
$scope.myFunc = function(x) {
var nametocng = 'showMe'+x;
//var nametocng = $parse("showMe"+x); // - I tried this also
$scope[nametocng] = !$scope[nametocng];
}
});
</script>
Try using this
you have keep condition on click and check against concat string
Js code
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
$scope.showMe1 = false;
$scope.nametocng = 'showMe1';
$scope.myFunc = function(x) {
var nametocng = 'showMe' + x;
$scope.showMe1 = $scope.nametocng === nametocng; // result will bool
}
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl'>
<button ng-click="myFunc(1)">Click Me!</button>
{{showMe1}} {{nametocng}}
<div ng-show="showMe1">
<h1>Menu:</h1>
<div>Pizza</div>
<div>Pasta</div>
<div>Pesce</div>
</div>
</div>
</div>
Jsfiddle link
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.
in my web app (which is with angularJs in the front part and with Symfony2 in the back part) i need to integrate a timer (count down of a quizzer) i found this timer https://github.com/siddii/angular-timer on github and it seems to be cool but i don't the integration in my webapp works but when i try to start the counter on an event (button click) it don't works, in fact i tried this script:
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Single Timer Example</title>
<script src="../angular/angular.min.js"></script>
<script src="../app/js/timer.js"></script>
<script>
angular.module('MyApp', ['timer']);
function MyAppController($scope) {
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, data){
console.log('Timer Stopped - data = ', data);
});
}
MyAppController.$inject = ['$scope'];
</script>
</head>
<body ng-app="MyApp">
<div ng-controller="MyAppController">
<h1>AngularJS - Single Timer Example</h1>
<h3><timer/></h3>
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
</div>
<br/>
</body>
</html>
and i got this error:
Argument 'MyAppController' is not a function, got undefined
any one can help me plz ?
after some changes the my code becomes :
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Example - Single Timer Example</title>
<script src="../angular/angular.min.js"></script>
<script src="../app/js/timer.js"></script>
<script>
var myApp = angular.module('myApp', ['timer']);
myApp.controller('MyAppController', ['$scope', function ($scope)
{
$scope.timerRunning = true;
$scope.startTimer = function (){
$scope.$broadcast('timer-start');
$scope.timerRunning = true;
};
$scope.stopTimer = function (){
$scope.$broadcast('timer-stop');
$scope.timerRunning = false;
};
$scope.$on('timer-stopped', function (event, data){
console.log('Timer Stopped - data = ', data);
});
}]).$inject = ['$scope'];
</script>
</head>
<body ng-app="myApp">
<div ng-controller="MyAppController">
<h1>AngularJS - Single Timer Example</h1>
<h3><timer/></h3>
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
</div>
<br/>
</body>
</html>
and i'm getting this beauty :/
Unknown provider: I18nServiceProvider <- I18nService
I'm doing the tutorial about angularjs. Everything is fine until working with route.
I 'm search about this problem before, but it not working for me.
I'm doing exactly the code which author type but it's not working.
ng-view put in index.html
<html ng-app="githubViewer">
<head>
<title>Demo</title>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/angular-route.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="MainController.js"></script>
<script type="text/javascript" src="github.js"></script>
</head>
<body>
<h1>Github Viewer</h1>
<div ng-view=""></div>
</body>
app.js
(function() {
var app = angular.module("githubViewer", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/main", {
templateUrl: "main.html",
controller: "MainController"
})
.otherwise({redirectTo:"/main"});
});})();
MainController.js
(function() {
var app = angular.module("githubViewer");
var MainController = function(
$scope, $interval, $location) {
var decrementCountdown = function() {
$scope.countdown -= 1;
if ($scope.countdown < 1) {
$scope.search($scope.username);
}
};
var countdownInterval = null;
var startCountdown = function() {
countdownInterval = $interval(decrementCountdown, 1000, 5, $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);})();
main.html
<div>
{{countdown}}
{{username}}
<form name="searchUser" ng-submit="search(username)">
<input type="search" required placeholder="usẻname to ind" ng-model="username" />
<input type="submit" value="Search" ng-click="search(username)">
</form>
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 getRepos = function(user){
return $http.get(user.repos_url)
.then(function(response){
return response.data;
});
};
return{
getUser : getUser,
getRepos: getRepos
};
};
var module = angular.module("githubViewer");
module.factory("github", github);})();
You have an error in your code:
var MainController = function($scope, $interval, , $location) {
// unnecessary comma here ----^
Remove comma (or insert missing parameter) and your app should start working.
In general I recommend to keep developer console open all the time during coding.
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