Update text box with drop down list selected value in angular js

Includes


https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"

Angular Script


var app = angular.module('windowExample', []);
1) we used $http service to call rest api
2) please note we will update only when the request to api is successful

app.controller('ExampleController',function ($scope, $window,$http) {
$http.get("http://restcountries.eu/rest/v1/all").success(function(data)
{$scope.Countries=data;
});
3) the function updates the text box with selected value of dropdown list
$scope.update=function()
{

$window.alert($scope.selval);
var selelem=angular.element(document.querySelector("#txtselName"));
    selelem.val($scope.selval);
}
}
);



Html part
1) design div
div ng-app="windowExample" ng-controller="ExampleController" ng-show="true"
2) design drop down list
select  style="width:100px;"  ng-model="selval" x-ng-change="update(selval)"
option ng-repeat="country in Countries" value={{country.name}}>{{country.name}}  option
  select

input type="text" id="txtselName"

Popular Posts