CODEWITHSUNDEEP
angularjs
david raja
david raja

Reputation: 87

Pass params between ng-click and a service Angular js

I have a "search" where the user input a value and i want to send this value in the service because i want that another controller can have access. But for the moment i can't do it, if someone can help me it would be very usfull i using Angular js.

And the js

var app = angular.module('MainApp', [])

app.factory('Search', function($rootScope, $http){
var search = '';
	function setSearch(bus){
		search = bus;
	}
	function getSearch(){
		return search;
	}
	return{
		setSearch : setSearch,
		getSearch: getSearch

	};
	//return myFactory;
	/*
	$scope.Search = function() {
		return {
			getDoctor: function () {
				return $http.get('api/doctor' + $scope.search.searchText).then(function (response) {
					orders = response.data;
					$rootScope.$broadcast('handleSharedOrders', orders);
					return orders;
				})
			}
		};
	}*/
});

app.controller('mainController', function ($scope, $http, Search) {


	$scope.loadList = function() {
		location.href = "doctors";
	};

$scope.search.searchText = Search.getSearch();
	$scope.Search = function(bus) {
		console.log(bus);
		Search.setSearch(bus);


	}


	$scope.doctors = {};
	$http.get('/api/doctor').success(function (data) {
		$scope.doctors = data;
	})
		.error(function (data) {
			console.log('Error: ' + data);
		});


	/*
	$http.get('/api/doctor/' + specialty).success(function (data) {
		$scope.doctorsSpecialty = data;
	})
		.error(function (data) {
			console.log('Error: ' + data);
		});
*/


});
<!DOCTYPE html>
<html ng-app="MainApp">
<head lang="en">
	<meta charset="UTF-8">
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
	<!-- Cargamos app -->
	<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
	<script src="../Controllers/core.js"></script>
	<title></title>
</head>
<body ng-controller="mainController">
<div align="center">
	<img src="../img/logo.jpg" >
</div>





<div class="container">
	<div class="row">
		<div class="col-md-4 col-md-offset-4">
			<div class="login-panel panel panel-default"  >
				<div class="panel-heading" >
					<h3 class="panel-title">Search Doctors</h3>
				</div>
				<div class="panel-body" >
					<form role="form"   >
						<fieldset>
							<div class="form-group" name="myForm"  >
								<input ng-model="search.searchText" type="text" class="form-control" placeholder="Search..." align="center">
							</div>
							<button class="btn btn-default" type="button" align="center" ng-click="Search(searchText)">
								<b align="center">Search</b>
							</button>
							<!-- Change this to a button or input when using this as a form -->
						</fieldset>
					</form>
				</div>

			</div>
			<div class="panel-heading" STYLE="background-color: #a7b5ce">
				<h3 class="panel-title">List of Doctors</h3>
			</div>
			<div class="panel-body" >
				<form role="form">
					<fieldset>
						<div class="form-group" name="myForm"  >
							<button class="btn btn-default" type="button" align="center" href=doctors ng-click="loadList()">
								<b>List of Doctors</b>
							</button>
						</div>
						<!-- Change this to a button or input when using this as a form -->
					</fieldset>
				</form>
			</div>
		</div>

	</div>

</div>



</body>
</html>

thank you for helping me

Upvotes: 0

Views: 50

Answers (2)

Jordi Ruiz
Jordi Ruiz

Reputation: 487

I think you were doing it well, but your code has a few errors. First, you are not declaring the object search in your scope but you are assigning the property searchText to it. So you should do something like that:

$scope.search = {
        searchText: ''
    };

Then, in the view when you click search you are passing searchText but it should be search.searchText.

Have a look at this: https://jsfiddle.net/jruizx/54xcmgqp/

Upvotes: 1

Lex
Lex

Reputation: 7194

Here you have defined search.searchText:

<input ng-model="search.searchText" type="text" class="form-control" placeholder="Search..." align="center">

And here you are trying to pass just searchText (which is undefined):

<button class="btn btn-default" type="button" align="center" ng-click="Search(searchText)">
    <b align="center">Search</b>
</button>

You need to either change your ng-model on your <input> to be 'search' or change the ng-click on your <button> to 'Search(search.searchText)'. If you choose to do the latter you may also want to explicitly create the search object in your controller.

Upvotes: 1

Related Questions