Santosh Jadi Santosh Jadi -4 years ago 44
jQuery Question

Get selected name from <select> tag

$scope.states = [
{"state_id":1,"state_code":"AN","state_name":"Andaman and Nicobar"},
{"state_id":2,"state_code":"AP","state_name":"Andhra Pradesh"},
{"state_id":3,"state_code":"AR","state_name":"Arunachal Pradesh\t"},
{"state_id":4,"state_code":"AS","state_name":"Assam"},
{"state_id":5,"state_code":"BR","state_name":"Bihar"}
];

<div class="form-group">
<label class="control-label col-sm-4">State :</label>
<div class="col-sm-6">
<select data-ng-model='state' id="state" class="form-control">
<option value=''>--SELECT--</option>
<option data-ng-repeat='st in states' value="{{st.state_code}}">{{st.state_name}}</option>
</select>
</div>
</div>




By fetching
$scope.state
, i get selected state value i.e,
st.state_code


But i want to fetch selected name i.e,
st.state_name
.

Using JQuery, i can get it by
$("#state option:selected").text()
but,

How to achieve it using AngularJS?

Answer Source

var eventsApp = angular.module('myApp',[])
eventsApp.controller('EventController', function($scope){
    $scope.states = [
        {"state_id":1,"state_code":"AN","state_name":"Andaman and Nicobar"},
        {"state_id":2,"state_code":"AP","state_name":"Andhra Pradesh"},
        {"state_id":3,"state_code":"AR","state_name":"Arunachal Pradesh\t"},
        {"state_id":4,"state_code":"AS","state_name":"Assam"},
        {"state_id":5,"state_code":"BR","state_name":"Bihar"}
    ];
    $scope.loadDistrict = function(){
        alert($scope.state.state_name);
    }
 });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="EventController">
      <div class="form-group">
        <label class="control-label col-sm-4">State :</label>
        <div class="col-sm-6">
          <select data-ng-model='state' id="state" class="form-control" data-ng-change='loadDistrict()' data-ng-options="state as state.state_name for state in states track by state.state_id">
            <option value=''>--SELECT--</option>
          </select>
        </div>
      </div>
    </div>
</body>

Look at the above answer. It will give entire object of selected state. $scope.state will have object of selected state and you can access any property of state object.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download