Adding parameters to ng-click in Angular JS - javascript

My code is something like this
HTML view
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="get_user_detail(Andrew)">
</button>
<button ng-click="get_user_detail(Andrew1)">
</button>
</div>
AngularJS
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
$scope.get_user_detail=function(name){
var response = $http.get("myURL", {
params: {user_id:12345,name:name}
});
response.success();
response.error();
}
}]);
While I was working with one parameter user_id,it was working fine,parameters were passed properly to request.After I added 2nd parameter name,it is not getting passed in params.

Andrew is not a variable of your $scope.
So when you do get_user_detail(Andrew), the value of Andrew is undefined.
I guess you would like to pass it as a static value (string), put your value between quotes ' ':
<button ng-click="get_user_detail('Andrew')">

As in the other answers, your code should work as long as you add " " to the strings you intend to pass as params.
var app = angular.module('ngApp', []);
app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
$scope.get_user_detail = function(name){
$scope.name = name
// response = $http.get("myURL", {
// params: {user_id:12345,name:name}
// });
// response.success();
// response.error();
}
}]);
<div ng-app="ngApp" ng-controller="myCtrl">
You clicked {{name}} <br/>
<button ng-click="get_user_detail('Andrew')"> Andrew
</button>
<button ng-click="get_user_detail('Bob')"> Bob
</button>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.3/angular.min.js"></script>
<script src="app.js"></script>
</div>
I commented the $http call for obvious reasons. Hope it helps.

You must have string in ng-click in ' ':
<button ng-click="get_user_detail('Andrew')">
and in js code - name put in ' '
params: {user_id:12345,'name':name}

I thought you not define variables in controller, define variable with $scope
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="get_user_detail(Andrew)">
</button>
<button ng-click="get_user_detail(Andrew1)">
</button>
</div>
Controller Code
var app = angular.module("myApp", []);
app.controller("myCtrl", ['$compile', '$http', '$scope', function ($compile, $http, $scope) {
$scope.Andrew = 'John';
$scope.Andrew = 'Jam';
$scope.get_user_detail=function(name){
var response = $http.get("myURL", {
params: {user_id:12345,name:name}
});
response.success();
response.error();
}
}]);
Other soluation you can direct pass string without define variable
<div ng-app="myApp" ng-controller="myCtrl">
<button ng-click="get_user_detail('Andrew')">
</button>
<button ng-click="get_user_detail('Andrew1')">
</button>
</div>

Related

Sharing Data between two controllers

I am using angular 1.x and I am trying to share data from one controller to another
I am using the above model in mainctrl. The radiotmplt.radiohead=='IRU600v3'is from firstctrl. I cannot share data using rootscope. Please advise.
Here is the demo how to share data using RootScope
link Jsfiddle
Js
var app = angular.module('myApp', []);
app.controller('ctrl1', function($scope, $rootScope) {
$scope.data = 'data';
$rootScope.data1 = 'old data';
$scope.setVal = function() {
$rootScope.data1 = 'new data';
}
});
app.controller('ctrl2', function($scope, $rootScope) {
$scope.data = $rootScope.data1;
$scope.$watch('data1', function(o, n) {
$scope.data = $rootScope.data1;
})
});
HTML
<div ng-app='myApp'>
<div ng-controller='ctrl1'>
controller 1
<input type='text' ng-model='data'>
<button ng-click='setVal()'>
Change
</button>
</div>
<hr>
<div ng-controller='ctrl2'>
controller 2
<input type='text' ng-model='data'>
</div>
</div>
Hope this will help you

Reload one controller from another controller Angular js

I am new to Angular js.I have seen the similar question, but I dont understand that.
I have 2 controllers
userControllers.controller('RatingCtrl', function($scope,$http,$rootScope,$route)
userControllers.controller('otherProfileCtrl', function ($scope, $routeParams, $rootScope, $http, $location, $window, $timeout,$uibModal, $compile)
RatingCtrl and otherProfileCtrl, this two modules are inter-related. My need is that, I have reload RatingCtrl from otherProfileCtrl using $route.reload();.Is there is any way to do this without uisng service?plz help
You could pass events from one controller to another in order to achieve this. You would then do something like:
var app = angular.module('myApp', []);
app.controller('firstController', ['$scope', '$rootScope',
function($scope, $rootScope) {
$scope.text = 'Initial text';
$scope.changeText = function(message) {
$scope.text = message;
};
$rootScope.$on('customEvent', function(event, message) {
$scope.changeText(message);
});
}
]);
app.controller('secondController', ['$scope',
function($scope) {
$scope.message = 'Message from second controller';
$scope.sendEvent = function() {
$scope.$emit('customEvent', $scope.message)
};
}
]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="firstController">
<h2>This is the fist controller:</h2>
<p>{{text}}</p>
</div>
<div ng-controller="secondController">
<h2>This is the second controller:</h2>
<input type="text" ng-model="message" />
<br>
<button ng-click="sendEvent()">Send message</button>
</div>
</div>
Here, the firstController listens to events propagated to the $rootScope, and the secondController sends the message. That is the functionality that you are looking for.
That being said, you would be much better off implementing shared behaviour in a service, since keeping track of all your custom events can be particularly tough.
Hope this helps.

Adding a JS Variable to a AngularJS Directory?

I can't seem to get the following code to work:
<script>alert(topic);</script> <!-- Outputs: "dynamics" -->
<div ng-include="'content/' + topic + '.html'"></div> <!-- Does not work. -->
I have deduced the variable is the problem as the following code does work:
<div ng-include="'content/' + 'dynamics' + '.html'"></div> <!-- Works. -->
Does anybody know how I can do this?
Update:
Following Steffen's link, I have written the following code, but still no luck:
<script>
alert(topic); // Outputs "dynamics"
var app = angular.module('myapp', []);
app.controller('MainCtrl', ['$scope', '$window', function ($scope, $window) {
$scope.topic = $window.topic;
}]);
</script>
<div ng-app="myapp" ng-controller="MainCtrl" ng-include="'content/' +
topic + '.html'"></div> <!-- Does not work. -->
Thanks.
Based on Steffen's jsfiddle, here is how I passed a JavaScript variable to AngularJS and used it in defining a directory:
<script>
// Create module.
var app = angular.module('app', []);
// Add controller to module.
app.controller('MainCtrl', ['$scope', '$window', function ($scope, $window) {
$scope.topic = $window.topic;
console.log($scope.topic);
}]);
</script>
<div ng-app="app" ng-controller="MainCtrl" ng-include="'content/' +
topic + '.html'"></div> <!-- Works! -->
Many thanks to all for their answers. :)
try this :
<div ng-include="'content/{{topic}}.html'"></div>
In angularjs , scope variable are access in HTML using The double curly brace notation {{ }} .
Try as follows:
<ng-include src="topic"> </ng-include>
Make sure you have define $scope.topic = "whateveryouwant";
-----------OR-----------
You could do it like:
<ng-include src="getTopic()"></ng-include>
Controller:
function AppCtrl ($scope) {
$scope.getTopic= function () {
return 'partials/whatever.html';
}
}

How to change $rootScope value in an ng-click function?

I am trying to change the value of $rootScope.name that I set in the controller by another function in another controller, but when I access the $rootScope.name in another controller the value remains the same as it was set. For example:
app.controller('homectrl', function($scope, $rootScope){
$rootScope.name = "joshua";
})
app.controller('aboutctrl', function($scope, $rootScope){
$scope.send = function(newname)
{
$rootScope.name = newname;
}
})
app.controller('servicectrl', function($scope, $rootScope){
console.log($rootScope.name); // this outputs joshua instead of new name set in send function in about controller
})
You can not push the button which triggers the send() method fast enough to make the servicectrl output the new name. if you really want to see what is in $rootScope.name after you pushed the button you should observe the value or $watch it, eg. by changing the servicectrl like this:
$rootScope.$watch('name', function(newname) {
console.log($rootScope.name);
});
In a case like that I would avoid using $rootScope, but instead I would use a factory service, shared between the two controllers.
Here is a working example:
var app = angular.module('myApp',[]);
app.controller('homectrl', function($scope, NameService){
$scope.name = NameService.name;
$scope.$watch(function(){return NameService.name}, function(newValue, oldValue){
$scope.name = newValue;
});
});
app.controller('aboutctrl', function($scope, NameService){
$scope.name = NameService.name;
$scope.send = function(newname){
NameService.changeName($scope.name);
console.log('New name!', $scope.name);
}
});
app.factory('NameService', function(){
return {
name : 'joshua',
changeName : function(newName){
this.name = newName;
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
<div ng-controller="homectrl">
<h3>Home Controller </h3>
<p>{{name}}</p>
</div>
<hr>
<div ng-controller="aboutctrl">
<h3>About Controller </h3>
<input type="text" ng-model="name" />
<button ng-click="send($scope.name)">Change</button>
</div>
</div>

Bind AngularJS variables into inline script tag

I have the need to add in some items from my scope into some inline script I need to run on my site.
From what I have tried in my demo it doesn't look possible to use the values from my scope in inline script tags. What is the best way to achieve this?
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<div ng-app="app">
<div ng-controller="MainCtrl">
'{{aaa}}'
<script>console.log('{{aaa}}');</script>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope', function ($scope) {
$scope.aaa = 'bbb';
}]);
</script>
Console returns '{{aaa}}'. I want it to return bbb.
<div id="idd" ng-controller="MainCtrl">
'{{aaa}}'
<button ng-click="$log.log(aaa)">log</button>
</div>
</div>
<script>
'use strict';
var app = angular.module('app', []);
app.controller('MainCtrl', ['$scope','$log',
function($scope, $log) {
$scope.aaa = 'bbb';
$scope.$log = $log;
//console.log($scope.aaa);
//console.log($scope.$parent);
}
]);
</script>

Categories

Resources