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"