how to get selected value in controller using angularjs - javascript

I am new in angularjs and trying to getting selected value in controller. It is working properly at front-end but the selected value getting undefined in controller, How can i access to selected value in controller?
<!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">
<select ng-change="changed()" ng-model="selectedOption" class="form-control">
<option ng-repeat="x in options" value="{{x.reason}}">{{x.reason}}</option>
</select>
{{selectedOption}}
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.options = [{reason: "Facebook"},
{reason: "Instagram"},
{reason: "Google"},
{reason: "Twitter"},
{reason: "SMS"}];
$scope.changed = function () {
console.log("selected Options: " + $scope.selectedOption);
}
});
</script>
</body>
</html>

Your code works.
DEMO
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.options = [
{reason : "Facebook"},
{reason : "Instagram"},
{reason : "Google"},
{reason : "Twitter"},
{reason : "SMS"},
];
$scope.changed= function() {
console.log("selected Options: "+$scope.selectedOption);
}
});
<!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">
<select ng-change="changed()" ng-model="selectedOption" class="form-control">
<option ng-repeat="x in options" value="{{x.reason}}">{{x.reason}}</option>
</select>{{selectedOption}}
</div>

Seems everything is okay, just call $scope.selectedOption from anywhere in controller.

Its working perfectly! I tried this in JSFiddle and its working as it should!
Even this is working too.
$scope.changed= function() {
console.log("selected Options: "+$scope.selectedOption);
}
Look here: https://jsfiddle.net/vLam3pe0/

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
$scope.selectedOption;
$scope.options = [{reason: "Facebook"},
{reason: "Instagram"},
{reason: "Google"},
{reason: "Twitter"},
{reason: "SMS"}];
$scope.changed = function () {
console.log("selected Options: " + $scope.selectedOption);
}
});
</script>

Related

Controller with this name is not registered

I am working on school project using angularjs, I don't know why I'm getting this Error: $controller:ctrlreg A controller with this name is not registered.
index.html:
...
<div ng-controller="medscontroller">
<ul>
<li ng-repeat="med in meds | filter:{nom:nom} | orderBy:order">{{med.nom}}</li>
</ul>
</div>
<script >
function medscontroller($scope){
$scope.meds=[
{"nom":"aspirine", "prix":"20"},
{"nom":"doliprane","prix":"15"},
{"nom":"da", "prix":"15"}
];
console.log($scope);
}
</script>
You cannot simply define a controller function like above.
In order for a controller to work, you have to do the following things.
Create an angular app with
var app = angular.module('myApp', []);
Deine a controller for that app with.
app.controller('myCtrl', function($scope) { });
Find a working example here.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}
</div>

Where To Put AngularJS Directive-Template Functions

If I do something like this in my directive:
template: '<button ng-click="Done()">DONE</button>'
Then where do I put my $scope.Done() function? I have it in a controller here but that doesn't seem to work
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="myApp" ng-controller="myctrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div mydiv></div>
<script>
angular.module("myApp", [])
.controller("myctrl", function($scope) {
$scope.Done = function() {
alert('Done');
};
});
angular.module("myApp", [])
.directive("mydiv", function() {
return {
template: '<button ng-click="Done()">DONE</button>'
};
});
</script>
</body>
</html>
Doing something like this will serve your purpose. Give a try ..
angular.module("myApp", [])
.directive("mydiv", function() {
return {
template: '<button ng-click="Done()">DONE</button>',
link: function (scope, element, attrs) {
scope.Done = function () {
alert('Done');
}
}
};
});
Remove below fuction from controller.
$scope.Done = function() {
alert('Done');
};
Not good approach to set the function directly, you need to bind it.
<!DOCTYPE html>
<html>
<head>
</head>
<body ng-app="myApp" ng-controller="myctrl">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
<div mydiv on-done="Done()"></div>
<script>
angular.module("myApp", [])
.controller("myctrl", function($scope) {
$scope.Done = function() {
alert('Done');
};
});
angular.module("myApp", [])
.directive("mydiv", function() {
return {
scope: {
onDone: '&'
},
template: '<button ng-click="onDone()">DONE</button>'
};
});
</script>
</body>
</html>
Here's a working example:
http://jsfiddle.net/ADukg/17585/

angularJS why $scope.$watch cant't work?

I want to add a $watch to watch $scope.data is changed or not, but it cant't work
[http://jsbin.com/biqesojaqu/1/edit?html,js,console,output][1]
app.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body ng-app="App" ng-controller="TestController">
<div>
<ul>
<li ng-repeat="item in data"> {{ item.name }}--{{ item.status }}</li>
<button ng-click="addOnePerson()">ADD</button>
</ul>
</div>
</body>
</html>
app.js
var App = angular.module("App", []);
App.controller('TestController', function ($scope) {
$scope.data = [
{name: 'cc', status: true},
{name: 'bob', status: false}
];
$scope.name = 'nataila';
$scope.addOnePerson = function () {
var personCount = $scope.data.length;
personCount += 1;
$scope.data.unshift({name: 'cc'+personCount, status: true});
};
$scope.$watch('data', function (){
console.log('has changed');
});
});
when I click the button, I think console will output has chenged, but it's nothing
please tell me Why, and it's Good to help me in JSbin
Use $watchCollection for an array or object
$scope.$watchCollection('data', function (){
console.log('has changed');
});
JSBin

Angular JS Expression is not working when I use a controller and module

I've just started learning Angular JS but soon I got a problem which I don't know how to resolve.
This code prints:
<h1>{{author[0].name}}</h1>
<p>{{author[0].title+ ', '+author[0].company}}
instead of:
<h1>MKJ</h1>
<p>Web Developer, Student Organization</p>
The code is given here as well:
<!doctype html>
<!-- Declaring the ng-app -->
<html ng-app="myApp">
<head>
<title>Parking</title>
<!-- Importing the angular.js script -->
<script src="lib/angular/angular.min.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", function ($scope){
$scope.author = {
'author': 'MKJ',
'title': 'Web Developer',
'company': 'Student Organization',
};
}
</script>
</head>
<!-- Attaching the view to the MyController -->
<body ng-controller="MyController">
<h1>{{author[0].name}}</h1>
<p>{{author[0].title+ ', '+author[0].company}}
See this snippet or correct the code on JS fiddle?
var myApp = angular.module("myApp", []);
myApp.controller("MyController", function ($scope){
$scope.author = {
'author': 'Ravy VIllalbobs',
'title': 'Staff Author',
'company': 'Lynda.com',
};
}
<div ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{author.title+ ', '+author.company}}
</div>
$scope.author is an Object so you don't need to specify index in brackets here
<h1>{{author.name}}</h1>
<p>{{author.title+ ', '+author.company}}
updated fiddle

Why this simple Angular.js example does not work?

I'm reading AngularJS from O'REILLY, and i tried to see how angular works with an example but i can make it functional:
The hello.html :
<html ng-app>
<head>
<script src="angular.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller="HelloController">
<p>{{ greeting.text }}, World</p>
</div>
</body>
</html>
and the logic within the controllers.js :
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
but when i display the hello.html on the browser, i can see {{ greeting.text }}, Hello.
What is wrong here?
You never defined a controller, you just defined a function that happened to have "controller" in the name.
Try initializing the app properly:
var myApp = angular.module('myApp',[]);
myApp.controller('HelloController', ['$scope', function($scope) {
$scope.greeting = {text: 'Hello'};
}]);
https://docs.angularjs.org/guide/controller

Categories

Resources