Angular Js - Get Selected Text As Ng Model (without Ng-options)

In my code behind, I fill up a DropDownList as follows (using VB) ddlCountries.DataSource = dt ' dt is DataTable with columns 'CountryCode' and 'CountryName' ddlCountries.DataTextF

Solution 1:

What data is the server sending you?

Is it some array of objects like this?

var countries = [ 
    { name: 'India', code: 'IN'},
    { name: 'United States', code: 'US'},
    { name: 'Malaysia', code: 'ML'}
];

If yes, then you can easily use ng-options (even though you dont have to, its just better).

<select ng-model="CountryName"
    ng-options="c.code as c.name for c in countries">
</select>

Or in the case that you actually are working with server side generated html page and no javascript objects, then its a little bit tricker: (Supposing you can use JQuery):

view:

<selectid="countryNameSelect"ng-change="setCountryName()"><optionvalue="IN">India</option><optionvalue="US">United States</option><optionvalue="ML">Malaysia</option><!-- and other 200+ records --></select>

controller:

$scope.countryName = '';
$scope.setCountryName = function() {
  $scope.countryName = $("#countryNameSelect option:selected").html();
};

Solution 2:

In PHP BackEnd array to Json Out: < ? php echo json_encode($arrayDemo); ? >

// Init Load
$(function () {
    'use strict';
    angular
        .module('ngjsapp', [])
        .controller('FormCtrl', ['$scope', function ($scope) {

            var myArraySelect = <?phpecho json_encode($arrayDemo); ?>$scope.changeSenasaProvinciasId = function (id) {
                console.log(myArraySelect[id]);
            }

        }]);
});

Only HTML Stact + jQuery

// Option 1
$(function () {
    'use strict';
    angular
        .module('ngjsapp', [])
        .controller('FormCtrl', ['$scope', function ($scope) {

            $scope.changeSenasaProvinciasId = function () {
                console.log($("#mySelectID option:selected").text());
            }

        }]);
});

Only HTML Stact + jQuery BEST

// Option 2
$(function () {
    'use strict';
    angular
        .module('ngjsapp', [])
        .controller('FormCtrl', ['$scope', function ($scope) {

            var myArraySelect = $('#mySelectID option').each( function() { 
                    myArraySelect.push({$(this).val() : $(this).text() });
                });

            $scope.changeSenasaProvinciasId = function (id) {
                console.log(myArraySelect[id]);
            }

        }]);
});