CODEWITHSUNDEEP
javascriptjqueryhtmlajaxangularjs
secuaz
secuaz

Reputation: 479

Binding value to select in angular js across 2 controllers

Working with angularJS I am trying to figure out a way to bind the value of a select element under the scope of controller A to use it as an argument for an ng-click call [getQuizByCampID() Function] under the scope of controller B.

My first idea was to use jquery, but I have read in the link below that using jquery is not recommended when starting with angularJS.

"Thinking in AngularJS" if I have a jQuery background?

I also read in the link below that this is performed using ng-model, the only problem is that that the example provided is all under the same controller. and Binding value to input in Angular JS

What is the angularJS way to get the value of the select element under controller A into the function call in the select under controller B?

Price.html view

  <div class="col-sm-3" ng-controller="campCtrl"> **Controller A** 
       <select  id="selCampID" class="form-control" ng-model="campInput" >
            <option ng-repeat="camp in campaigns" value="{{camp.camp_id}}">{{camp.camp_name}}</option>  
        </select>
  </div>

   <div class="col-sm-3" ng-controller="quizCtrl">  **Controller B**
        <select   ng-click="getQuizByCampID($('#selCampID').val())" class="form-control" ng-model="quizInput">
             <option ng-controller="quizCtrl" ng-repeat="quiz in quizzesById" value="{{quiz.quiz_id}}">{{quiz.quiz_name}}</option>  
         </select>
    </div>

App.js

var app= angular.module('myApp', ['ngRoute']);
app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/price', {templateUrl: 'partials/price.html', controller: 'priceCtrl'});
}]);

$routeProvider.when('/price', {templateUrl: 'partials/price.html', controller: 'priceCtrl'});

Quiz Controller

'use strict';

app.controller('quizCtrl', ['$scope','$http','loginService', function($scope,$http,loginService){
$scope.txt='Quiz';
$scope.logout=function(){
    loginService.logout();
}
getQuiz(); // Load all available campaigns 
function getQuiz(campID){  
    $http.post("js/ajax/getQuiz.php").success(function(data){
    $scope.quizzes = data;
    //console.log(data);
   });
};
  $scope.getQuizByCampID = function (campid) {
  alert(campid);
$http.post("js/ajax/getQuiz.php?campid="+campid).success(function(data){
    $scope.quizzesById = data;
    $scope.QuizInput = "";
  });
  };

    $scope.addQuiz = function (quizid, quizname, campid) { 
  console.log(quizid + quizname + campid);   
  $http.post("js/ajax/addQuiz.php?quizid="+quizid+"&quizname="+quizname+"&campid="+campid).success(function(data){

  getQuiz();
  $scope.QuizInput = "";
});
  };

}])

Upvotes: 2

Views: 131

Answers (2)

rmuller
rmuller

Reputation: 1837

You should store the value in a service.

example: 

app.factory('SharedService', function() {
  this.inputValue = null;

  this.setInputValue = function(value) {
    this.inputValue = value;
  }

  this.getInputValue = function() {
    return this.inputValue;
  }

  return this;
});

Example on Plunkr

Read: AngularJS Docs on services

or check this Egghead.io video

Upvotes: 2

Greg Zuber
Greg Zuber

Reputation: 1279

You should use service to store the value.

This is how to do that: Share data between AngularJS controllers

Upvotes: 0

Related Questions