In the following AngularJS code:
<!doctype html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js" ></script>
</head>
<script type="text/javascript">
var myApp = angular.module('myApp', []);
myApp.controller('MainCtrl', ['$scope', function ($scope) {
}]);
</script>
<body>
<div ng-app="myApp">
<div ng-controller="MainCtrl">
<script>
function Ctrl($scope) {
$scope.name = 'Whirled';
}
</script>
<div ng-controller="Ctrl">
<input type="text" ng-model="name" ng-focus=""><br>
<input type="text" ng-model="place"><br>
</div>
</div>
</div>
</body>
</html>
I want to set focus on the first input element. There isn't an example of this on angular.org and the code above doesn't work. How do you use ng-focus? Does this directive even exist at all?
Related
I am learning AngularJS and trying to understand the $scope part, I was trying to do string combine by creating three variables(ng-model) and see how javascript works with angularJS. Say if I insist on creating three of the ng-model, how do I combine the two strings and put them together in the rstString? I tried to read the $scope elements and the data is there, so what did I miss? Thank you.
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.rstString = $scope.firstString +$scope.secondString;
});
</script>
</body>
</html>
I added a button in your example :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString = 'hello '"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
You can do like this too :
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.4-build.3588/angular.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString"/><br><br>
Second String: <input ng-model="secondString"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString">{{rstString}}</p>
<button ng-click="concat()">Concat</button>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstString = 'hello ';
$scope.secondString = ' world ';
$scope.rstString = 'aaa';
$scope.concat = function() {
$scope.rstString = $scope.firstString +$scope.secondString;
}
});
</script>
</body>
</html>
you can use ng-change event
<!DOCTYPE html>
<html>
<head>
<title>angularJS for beginners</title>
<script src="../angular-1.7.9/angular.min.js"></script>
</head>
<body>
<h4>combine two string using strong expression</h4>
<div ng-app="myApp" ng-controller="myCtrl">
First String : <input type="text" ng-model="firstString" ng-init="firstString='hello '" ng-change="handleChange()"/><br><br>
Second String: <input ng-model="secondString" ng-init="secondString=' world'" ng-change="handleChange()"/><br><br>
Resulting String:<p style="color:blue;font-weight:bold;" ng-model="rstString" ng-init="rstString='aaa'"></p>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
console.log($scope);
console.log("1st:"+$scope.firstString);
console.log("2nd:"+$scope.secondString);
console.log("rst:"+$scope.rstString);
$scope.handleChange = () => {
$scope.rstString = $scope.firstString +$scope.secondString;
};
});
</script>
</body>
Hi Guys I am an Entry level programmer for angularJS i tried to use ng-show but i dont know why its not been working. I used latest version of Angular js-1.7.9.
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Index Page</title>
</head>
<body >
<div ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagaph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</div>
<script src="./js/angular.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
</script>
</body>
</html>
I tried to solve by many possibilites but couldn't get on the error. Thanks in Advance.
Fix the typo:
̶<̶b̶u̶t̶t̶o̶n̶ ̶n̶g̶-̶c̶l̶i̶c̶k̶=̶"̶s̶h̶o̶w̶P̶a̶r̶a̶g̶a̶p̶h̶(̶)̶"̶>̶C̶l̶i̶c̶k̶ ̶M̶e̶<̶/̶b̶u̶t̶t̶o̶n̶>̶
<button ng-click="showParagraph()">Click Me</button>
var app = angular.module('myApp', []);
app.controller('ShowController', function($scope) {
$scope.visible=true;
$scope.showParagraph = function() {
$scope.visible=false;
};
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<body ng-app="myApp">
Enter Your Name: <input type="text" ng-model="firstName">
<br>
<b>{{firstName}}</b>
<div ng-controller="ShowController">
<button ng-click="showParagraph()">Click Me</button>
<p ng-show="visible">Hello world</p>
</div>
</body>
Below is my code. Not sure why ng-repeat shows up completely blank.
Any help greatly appreciated.
Larry
<!DOCTYPE html>
<html>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
</script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul><li ngrepeat="x in names">{{x}}</li></ul> </div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil","Tobias","Linus"];
});
</script>
</body>
</html>
Fix the typo
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"> </script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul><li ng-repeat="x in names">{{x}}</li></ul> </div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil","Tobias","Linus"];
});
</script>
</body>
</html>
Here's my code, however ng-change is never called. Does anyone know why ? Thanks
<html ng-app="">
<head>
</head>
<body data-ng-init="names=['A', 'B', 'C']">
<script src="resources/js/angular/angular.min.js"></script>
<script src="resources/js/angular/angular.min.js.map"></script>
<select class="form-control input-sm"
ng-model="fda"
ng-change="alert('changed')"
ng-options= "value for value in names" >
</select>
</body>
</html>
You need to have a controller and a corresponding function inside of it,
app.controller("myCtrl", function($scope) {
$scope.alert = function (){
alert("changed");
}
});
DEMO
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.alert = function (){
alert("changed");
}
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
<select class="form-control input-sm" ng-model="fda" ng-change="alert('changed')" ng-options="value for value in names">
</select>
</div>
</body>
</html>
Just add this line in your controller $scope.alert = alert.bind(window);
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.alert = alert.bind(window);
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body ng-app="myApp" ng-controller="myCtrl">
<div ng-init="names=['A', 'B', 'C']">
<select class="form-control input-sm" ng-model="fda" ng-change="alert('changed')" ng-options="value for value in names">
</select>
</div>
</body>
</html>
I am new to Angularjs so i made one example to call a controller but i am not able to call controller ...
this is my sample code
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.9.0.js"></script>
<script type="text/javascript" src="angularjs/angular.min.js"></script>
</head>
<body ng-app="">
<div data-ng-controller="mycontroller">
</div>
<script>
function mycontroller($scope, $http) {
alert("alert");
}
</script>
</body>
try this
<body ng-app="learning">
<div data-ng-controller="mycontroller">
</div>
<script>
angular.module("learning", [])
.controller("mycontroller", function($scope, $http) {
alert("alert");
});
</script>
</body>
You can try this, but I recommend you to read angular tutorials to understand how controllers and binds works.
http://www.w3schools.com/angular/
https://docs.angularjs.org/tutorial
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="mycontroller" ng-init="initMethod()">
<!--<input type="text" ng-model="test"></p>
<div>{{test}}</div>-->
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('mycontroller', function($scope) {
alert("alert")
$scope.initMethod = function(){
alert("alert from init");
}
});
</script>
</body>
</html>