2017-01-18 2 views
0

Я пытаюсь создать приложение с использованием HTML и angularJS.как получить значение от одного контроллера к другому контроллеру и вызвать json с помощью angularJS

Требование состоит в том, чтобы иметь два текстовых поля автозаполнения, чтобы получить город и имя.

Я могу получить эти два и то, и другое. нет проблема для меня есть. Am не в состоянии получить имена на основе города, выбранного (если не выбран ни один город: показать имена из всех городов & &, если город будет выбран показать имена из города только)

Вот мой код:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"> 

<script src="js/jquery.min.js"></script> 
<script src="js/bootstrap.js"></script> 



    <script src="https://code.angularjs.org/1.5.0/angular.js"></script> 
    <script src="https://code.angularjs.org/1.5.0/angular-aria.js"></script> 
    <script src="https://code.angularjs.org/1.5.0/angular-animate.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.js"></script> 

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css" /> 
    <link rel="stylesheet" href="style.css" /> 

     <script src="js/iHelixAngular.js"></script> 

    <title>Insert title here</title> 


</head> 

<body ng-app='myapp' layout="column" ng-controller="areaLocationController as ctrl" > 

    <div class="col-md-3" ng-controller="areaLocationController as ctrl" > 
    <md-autocomplete flex 
      md-selected-item="ctrl.selectedItem" 
      md-search-text="ctrl.searchText" 
      md-items="item in ctrl.querySearch(ctrl.searchText)" 
      md-item-text="item.label" 
      md-delay="300" 
      md-floating-label="Area/City/Zip Code"> 
      <div layout="row" class="item" layout-align="start center"> 
      <!-- <img ng-src="{{item.avatar_url}}" class="avatar" /> --> 
      &nbsp;&nbsp; 
      <span md-highlight-text="ctrl.searchText">{{item.label}}</span> 
      <input type="hidden" ng-model="myservice.city" name="label" id="label" value="{{item.label}}"/> 

      </div> 
      </md-autocomplete> 
     </div> 
     <div class="col-md-3" ng-controller="autocompleteController as ctrl1" > 
     <md-autocomplete flex 
       md-selected-item="ctrl1.selectedItem" 
       md-search-text="ctrl1.searchAreaText" 
       md-items="itemArea in ctrl1.queryAreaSearch(ctrl1.searchAreaText)" 
       md-item-text="itemArea.label" 
       md-delay="300" 
       md-floating-label="Doctor/Speciality/Care Provider"> 
       <div layout="row" class="item" layout-align="start center"> 

       <span md-highlight-text="ctrl1.searchAreaText">{{itemArea.label}}</span> 
       <input type="hidden" ng-model="DocLabel" name="DocLabel" id="DocLabel" value="{{itemArea.label}}"/> 
       <input type="hidden" ng-model="doctorId" name="doctorId" id="doctorId" value="{{itemArea.doctorId}}"/> 
       <input type="hidden" ng-model="specializationId" name="specializationId" id="specializationId" value="{{itemArea.specializationId}}"/ > 
       </div> 
       </md-autocomplete> 
     </div> 



    </body> 
</html> 

Это файл JS

var app = angular.module('myapp', ['ngMaterial']); 


     app.service('myservice', function() { 

        this.city=""; 
      }); 
     app.controller("areaLocationController", function($http){ 

      this.querySearch = function(query){ 
      return $http.get("http://localhost:8080/iHelix2015/getLocationListMobile", {params: {q: query}}) 
      .then(function(response){ 
       return response.data.result; 
      }) 
      } 
     }); 
     app.controller("autocompleteController", ['$rootScope', '$scope', '$http','myservice', 
         function($rootScope, myservice,$http){ 
      this.queryAreaSearch = function(Area){ 
      this.myservice = myservice; 
       /*alert(Area);*/ 
      var cityValue=myservice.city; 

       return $http.get("http://localhost:8080/iHelix2015/getDocSearchListForAppMobile", {params: {searchDoc: Area,city:cityValue}}) 
       .then(function(response){ 
       return response.data.result; 
       }) 
      } 

     }]); 

пожалуйста, скажите мне, как передать значение города вместе с doctor_name во втором контроллере во время прохождения Params к вызову JSon.

+0

Вы хотите передать некоторые значения из «autocompleteController» контроллера «areaLocationController» контроллер? – kamlesh

+0

быстрый вопрос, зачем вам два контроллера? – debuggerpk

+0

Да, мне нужно передать значение в areaLocationController в autocompleteController. Являюсь новым для этого AngularJS, если его возможно в одном контроллере или любом другом формировании работать аналогично, пожалуйста, скажите пример – HARISH

ответ

1

Пожалуйста, следующие изменения и посмотреть, если он работает:

  1. INJECT «MyService» в «areaLocationController» и назначить его в локальную переменную «MYSERVICE».

  2. Удалить зависимость «$ scope» из массива инъекций/аннотации зависимостей «autocompleteController», массив аннотаций должен всегда синхронизироваться с параметрами в объявлении функции.

Вот код, с изменениями:

var app = angular.module('myapp', ['ngMaterial']); 

app.service('myservice', function() { 
    this.city = ""; 
}); 

app.controller("areaLocationController", ['$http', 'myService', 
    function($http, myService) { 
    this.myService = myService.city; 
    this.querySearch = function(query) { 
     return $http.get("http://localhost:8080/iHelix2015/getLocationListMobile", { 
      params: { 
      q: query 
      } 
     }) 
     .then(function(response) { 
      return response.data.result; 
     }); 
    }; 
    } 
]); 

app.controller("autocompleteController", ['$rootScope', '$http', 'myservice', 
    function($rootScope, myservice, $http) { 
    this.queryAreaSearch = function(Area) { 
     this.myservice = myservice; 
     /*alert(Area);*/ 
     var cityValue = myservice.city; 

     return $http.get("http://localhost:8080/iHelix2015/getDocSearchListForAppMobile", { 
      params: { 
      searchDoc: Area, 
      city: cityValue 
      } 
     }) 
     .then(function(response) { 
      return response.data.result; 
     }); 
    }; 

    } 
]); 
+0

вы можете сообщить мне полный код с внесением изменений в настоящий код – HARISH

Смежные вопросы