i have 1 dropdown country, dropdown cities , autocomplete textbox places.
when select country in first dropdown shows cities list particular country in second dropdown.
next want show places list under selected city in autocomplete textbox.
i have 1 local json file, html page , javascript file. html code goes follows:
<html ng-app="myapp"> <head> <script data-require="angular.js@1.3.9" data-semver="1.3.9" src="https://code.angularjs.org/1.3.9/angular.js"></script> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" /> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script> <script type="text/javascript" src="js/json4update.js"> < script type = "text/javascript" src = "js/textauto.js" > </script> </head> <body> <div ng-controller="mycontroller"> <select ng-model="countryselected" ng-options=" coun.country coun in country" ng-change="getcity()"> <option value="">select</option> </select> <select ng-model="cityselect" ng-options=" c.name c in citydetails " ng-disabled="!countryselected"> <option value="">select</option> </select> <input id="tags" ng-model="placeselected" ng-keyup="complete()" placeholder="type place name" ng-disabled="!cityselect" /> </div> </body> </html> here goes .js file, here problem guess. not able use js function on required place.
var app = angular.module('myapp', []); app.controller('mycontroller', function ($scope, $http) { $http.get("file2update.json").success(function (data) { $scope.country = data.records; $scope.getcity = function () { $scope.citydetails = $scope.countryselected.cities; $scope.places = $scope.cityselect.place; } }); $scope.complete = function () { $("#tags").autocomplete({ source: $scope.placeselected }); } }); here json file .
{ "records": [{ "cities": [{ "name": "patna", "place": [ "p1", "p2", "p3"] }, { "name": "delhi", "place": [ "d1", "d2"] }], "country": "india" }, { "cities": [{ "name": "australia1", "place": [ "a1", "a2", "a3"] }, { "name": "australia2", "place": [ "a11", "a22", "a33"] }], "country": "australia" }] }
Comments
Post a Comment