Link to home
Start Free TrialLog in
Avatar of Peter Pang
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?

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>

Open in new window

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;
    });
}]);

Open in new window

Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

The code works fine for me

Take a look at this sample which is made up of the code you posted

HTML
    <h3>Test 5, Factory user </h3>
    <div ng-controller="Ctrl">
        <input ng-init="role='MyAdmin'" ng-model="role">
        <label>{{message}}</label>
    </div>

Open in new window

Angular
<script>
(function() {
	'use strict';
	var app = angular.module("TestApp",[]);

	app.factory('user', ['$http', '$window', '$log', function ($http, $win, $log) {
		var urlBase = '/ee';
		$log.log('user');
		var getData = function (role) {
			return $http.get(urlBase + '/t2940.php?role=' + 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;
		});
	}]);
})();
</script>

Open in new window

Test API
<?php
echo "Test";

Open in new window

Working sample here
EDIT:
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.
Avatar of Peter Pang
Peter Pang

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.
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?

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;
    });
}]);

Open in new window

If you want to pass role to the factory you need to do this
app.controller('Ctrl', ['$scope', '$log', 'user', function ($scope, $log, user) {
    user.getRole($scope.role).then(function (role) {
        $scope.message = role;
    });
}]);

Open in new window

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">

Open in new window

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;
		});
	}]);

Open in new window

Updated sample here
This question needs an answer!
Become an EE member today
7 DAY FREE TRIAL
Members 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.