Peter Pang
asked on
AngularJs Controller - take input value, pass to factory to process, then display results
Hi,
I am trying to write a AngularJS controller. it takes the value from the input text box on the html. (i.e "MyAdmin") then pass this value to the factory called user. the factory will then return a value if the user called "MyAdmin" is an admin user or not. and then show the result (true or false) in the front end, {{message}}
However, I could not get the controller work. How to write the controller?
I am trying to write a AngularJS controller. it takes the value from the input text box on the html. (i.e "MyAdmin") then pass this value to the factory called user. the factory will then return a value if the user called "MyAdmin" is an admin user or not. and then show the result (true or false) in the front end, {{message}}
However, I could not get the controller work. How to write the controller?
Test.html
<h3>Test 5, Factory user </h3>
<div ng-app="TestApp" ng-controller="Ctrl">
<input ng-init="role='MyAdmin'" ng-model="role">
<label>{{message}}</label>
</div>
in app.js
var app = angular.module("TestApp",[]);
app.factory('user', ['$http', '$window', '$log', function ($http, $win, $log) {
var urlBase = '../../api/roleandpermission';
$log.log('user');
var getData = function (role) {
$win.alert(role);
return $http.get(urlBase + '/GetUserIsInRole/' + role)
.then(function (response) {
return response.data
})
};
return {
getRole: getData
};
}]);
app.controller('Ctrl', ['$scope', '$log', 'user', function ($scope, $log, user) {
user.getRole().then(function (role) {
$scope.message = role;
});
}]);
ASKER
Hi Julian Hansen,
Thank you for looking into the issue and prompt response
However, getting undefined is not right. Why there is no parameter passed? how to get the parameter to pass? That is the problem I try to solve.
Whatever in the input textbox e.g. "MyAdmin", "MyUser1", "MyUser2".etc, I want to get them checked by the factory, if they are Admin, then return true, otherwise return false.
Thank you for looking into the issue and prompt response
However, getting undefined is not right. Why there is no parameter passed? how to get the parameter to pass? That is the problem I try to solve.
Whatever in the input textbox e.g. "MyAdmin", "MyUser1", "MyUser2".etc, I want to get them checked by the factory, if they are Admin, then return true, otherwise return false.
I don't follow you?
How must the factory test the value? Does it need to call a server script to do this or is there some rule it must check internally?
I am not clear on what you are wanting here?
Update your control to this
How must the factory test the value? Does it need to call a server script to do this or is there some rule it must check internally?
I am not clear on what you are wanting here?
Why there is no parameter passed? how to get the parameter to pass? That is the problem I try to solve.Let's look at this code. Where in the getRole() call is there a parameter?
app.controller('Ctrl', ['$scope', '$log', 'user', function ($scope, $log, user) {
user.getRole().then(function (role) {
$scope.message = role;
});
}]);
If you want to pass role to the factory you need to do thisapp.controller('Ctrl', ['$scope', '$log', 'user', function ($scope, $log, user) {
user.getRole($scope.role).then(function (role) {
$scope.message = role;
});
}]);
However, this will still get you undefined because you are using ng-init on your control rather than initialising your scope in the controller.Update your control to this
<input ng-model="role">
And your controller to this app.controller('Ctrl', ['$scope', '$log', 'user', function ($scope, $log, user) {
$scope.role = 'MyAdmin'
user.getRole($scope.role).then(function (role) {
$scope.message = role;
});
}]);
Updated sample here
This question needs an answer!
Become an EE member today
7 DAY FREE TRIALMembers can start a 7-Day Free trial then enjoy unlimited access to the platform.
View membership options
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Take a look at this sample which is made up of the code you posted
HTML
Open in new window
AngularOpen in new window
Test APIOpen in new window
Working sample hereEDIT:
Removed the alert as this was just confusing the issue. No parameter is being passed to the getData() function so the alerat will always show undefined.