I have a textbox which is connected to angular js with ng-model=sampleValue
Now, my requirement is whenever I click on the button show function should be executed and the textbox's value should be changed to Harish. But this is not the result I'm getting. Please take a look at the code that I have written below:
var app = angular.module("myApp", [])
app.controller("mainController", [ "$scope", function($scope){
$scope.show = function(){
$scope.sampleValue = "Harish";
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp">
<input ng-controller="mainController" type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
Thank you in advance :)
Currently you had applied ng-controller over input element, which means controller scope has restricted on input DOM only, because of which show method would not get call. You should move ng-controller to wrapper element(here its body).
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="mainController">
<input type="text" ng-model="sampleValue" />
<button ng-click="show()">Click Here</button>
</body>
Plunker
Move ng-controller to body tag:
var app = angular.module("myApp", [])
app.controller("mainController", [ "$scope", function($scope){
$scope.show = function(){
$scope.sampleValue = "Harish";
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp" ng-controller="mainController">
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
Put ng-controller in body or in some parent div. You are using ng-controller in input type
Try this
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
angular.module('myApp',[])
.controller('myCtrl', function myCtrl($scope,$filter) {
$scope.showValue = function(){
$scope.sampleValue = "Harish";
}
})
</script>
</head>
<body ng-controller="myCtrl">
<input type="text" ng-model="sampleValue"/>
<button ng-click="showValue()">Click Here</button>
</body>
</html>
var app = angular.module("myApp", [])
app.controller("mainController", [ "$scope", function($scope){
$scope.show = function(){
$scope.sampleValue = "Harish";
}
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp" ng-controller="mainController">
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
your ng-controller is on the input
The fact is you used ng-controller over input tag. so outside of the input tag inside controller function will not work. your js is totally ok. u just need to change the html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body ng-app = "myApp" >
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</body>
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<title>Ang</title>
</head>
<body>
<div ng-app="">
<h1>Ng-show ng-hide</h1>
<p class="description">Click on the "show"-link to see the content.</p>
Show
<button ng-click="showme=false">Hide</button>
<div class="wrapper">
<p ng-hide="showme">It will appear here!</p>
<h2 ng-show="showme">This is mah content, yo!</h2>
</div>
</div>
</body>
</html>
Try executing the above code you may get an idea for you code.
Your controller scope is limited to input text box.
<body ng-app = "myApp">
<div ng-controller="mainController">
<input type="text" ng-model="sampleValue"/>
<button ng-click="show()">Click Here</button>
</div>
</body>
Related
I have no idea about Angular.js. But want I want to do is
this
<head>
<script type="text/javascript">
function showAndroidToast(toast) {
Android.showToast(toast);
}
</script>
</head>
and this
<body>
<input type="button" value="Say hello" onClick="showAndroidToast('Hello Android!')" />
</body>
any idea?
Here is angular js code.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
$scope.showAndroidToast = function(toast) {
//write your code here to perform some action on calling this function
//Android.showToast(toast);
alert(toast);
console.log(toast);
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="namesCtrl">
<input type="button" value="Say hello" ng-click="showAndroidToast('Hello Android!')" />
</body>
</html>
You should go through docs first of angular :
Its so simple as below :
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.showAndroidToast = function(toast) {
Android.showToast(toast); // Android should be inject as an dependency otherwise it would be undefined.
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="plunker" ng-controller="MainCtrl">
<input type="button" value="Say hello" ng-click="showAndroidToast('Hello Android!')" />
</body>
I managed to create a simple example for you. I was missing the Android class, so I tested it using the alert() function.
AngularJS 2
Plunkr Demo
Guidelines
AngularJS's Controller As and the vm Variable
File-closure and Strict mode
Angular Components
ngApp
ngController
ngClick
(function() {
"use strict";
function exampleController() {
var vm = this;
vm.showAndroidToast = showAndroidToast;
function showAndroidToast(message) {
alert(message); // replace this with your toast message
}
}
var app = angular.module("exampleApp", []);
app.controller("exampleController", exampleController);
})();
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-app="exampleApp" ng-controller="exampleController as vm">
<input type="button" value="Say hello" ng-click="vm.showAndroidToast('Hello Android!')" />
</body>
</html>
how to pass scope variable as 'FormName' of ng-click parameter to get FormName.$valid and FormName.$dirty in view angularjs.
Example:
var myApp = angular.module('myApp', []);
myApp.controller('Main', ['$scope',function($scope){
$scope.FormName = 'FormNameValidation';
$scope.showFormValidation = function(statusValid, statusDirty)
{
$scope.FormNameValidationStatus = statusValid;
$scope.FormNameDirtyStatus = statusDirty;
}
}]);
<form name="FormName" novalidate>
<div ng-app='myApp' ng-controller="Main">
<button type="button" ng-click="showFormValidation(FormName.$valid, FormName.$dirty)">Click</button>
{{FormNameValidationStatus}}
{{FormNameDirtyStatus}}
</div>
</form>
Output: undefined undefined
The problem is that the form element is not enclosed within the element that defines ngApp directive. If you rearrange the elements so that the form is a descendant of the div with the ng-app attribute you should get what you want
var myApp = angular.module('myApp', []);
myApp.controller('Main', ['$scope',
function($scope) {
$scope.FormName = 'FormNameValidation';
$scope.showFormValidation = function(statusValid, statusDirty) {
$scope.FormNameValidationStatus = statusValid;
$scope.FormNameDirtyStatus = statusDirty;
}
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Form State</h1>
<div ng-app="myApp" ng-controller="Main">
<form name="FormName" novalidate="">
<button type="button" ng-click="showFormValidation(FormName.$valid, FormName.$dirty)">Click</button>
{{FormNameValidationStatus}} {{FormNameDirtyStatus}}
</form>
</div>
</body>
</html>
I have a simple Angular Program in which the span must show only if the input value is 'Peter'. I was hoping that if I change input value then span must vanish, but when I am trying to change the value of input box, it is not allowing me do so. What is the issue due to which I am unable to change input value ?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
<span ng-show="name='peter'">{{name}}</span>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});
</script>
</body>
</html>
Change ng-show to
<span ng-show="name.toLowerCase()==='peter'">{{name}}</span>
You are using assignment operator but you need to compare the values and also change the case of input value.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script data-require="angular.js#1.4.8" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name"/>
<span ng-show="name.toLowerCase()==='peter'">{{name}}</span>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});
</script>
</body>
</html>
Try this.
<body ng-app="myApp" ng-controller="myCtrl">
<input type="text" ng-model="name">
<p ng-hide="name!== 'peter'">peter</p>
<p ng-show="name!== 'peter'"></p>
<script>
//module declaration
var app = angular.module('myApp', []);
//controller declaration
app.controller('myCtrl',function($scope){
});
</script>
I am new in angularjs and going through Egghead.io videos..but i could not link js page into html page.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Angular</title>
</head>
<body>
<div ng-app="">
<div ng-controller="FirstCtrl">
<h4>{{ "data.message"}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
and my main.js file is
function FirstCtrl($scope) {
$scope.data = {message: "panel"};
}
You need to define your app as var VARIABLE_NAME=angular.module('APP_NAME') and your controller as VARIABLE_NAME.controller('CONTROLLER_NAME', FUNCTION_EXPRESSION)
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', FirstCtrl);
function FirstCtrl($scope) {
$scope.data = {
message: "panel"
};
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h4>{{data.message}}</h4>
<div class="{{data.message}}">
Wrap me up in component
</div>
</div>
</div>
Note: You should not have quotes("") in your expressions or else, it will be treated at string.
Move these links inside tag
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"> </script>
<script type="text/javascript" src="main.js"></script>
and you cannot use $scope with module and controller this must be
var app = angular.module('myApp', []);
app.controller('FirstCtrl', function($scope) {
$scope.data = {"message": panel};
});
and in html
<div ng-app="myApp">
to first div
and use
{{data.message}}
Sorry about the noob question, I'm new to AngularJS.
I have a Service and 2 Controllers , one for my home page and the second for the page that I want to create dynamically.
I want to set an object from my first controller(home page) in my service, and get this object in my second controller(on a new html page that I'll call with form action) and display some attributes of this object.
How can I do that?
Thanks!
EDIT
Sample of what I need :
index.html
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="app.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
First Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
Aqui!
</div>
</body>
</html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="secondCtrl">
Second Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
</div>
</body>
</html>
http://plnkr.co/edit/sSBnE7gllFc0F6197cUD?p=info
In that case you can use ngStorage https://github.com/gsklee/ngStorage because data in service will be destroyed after full page reload.
please see demo here http://plnkr.co/edit/8b04wZ6btGwLodRuJr7V?p=preview
JS:
var app = angular.module('app', ['ngStorage']);
app.controller('firstCtrl', function($scope, $localStorage) {
$scope.storage = $localStorage.$default({myValue: 0 });
});
app.controller('secondCtrl', function($scope, $localStorage) {
$scope.storage = $localStorage;
});
HTML1
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="app.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
First Controller
<button ng-click="storage.myValue = storage.myValue + 1">{{storage.myValue}}</button>
{{service.data.value}}
<hr/>
Aqui!
</div>
</body>
</html>
HTML2
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
<script src="app.js"></script>
<body ng-app="app">
<div ng-controller="secondCtrl">
Second Controller myValue is: {{storage.myValue}}
</div>
Page 1
</body>
</html>
var app = angular.module('app', []);
app.service('dataService', function(){
var _data = {value:0};
return {
data : _data
};
});
app.controller('firstCtrl', function($scope,dataService){
$scope.data = dataService.data;
$scope.add = function(){
$scope.data.value ++;
};
});
app.controller('secondCtrl', function($scope,dataService){
$scope.data = dataService.data;
$scope.add = function(){
$scope.data.value ++;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app="app">
<div ng-controller="firstCtrl">
First Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
</div>
<div ng-controller="secondCtrl">
Second Controller
<button ng-click="add()">add</button>
{{data.value}}
<hr/>
</div>
</body>
Inject the service into your first controller, set an object on it. Inject the same service into the second controller and viola - the object is there!