javascript - Angular JS - get selected text as ng model (without ng-options) - Stack Overflow

admin管理员组

文章数量:1316016

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.DataTextField = "CountryName"
ddlCountries.DataValueField = "CountryCode"
ddlCountries.DataBind()
ddlCountries.Attributes.Add("ng-model", "CountryName")

Then client side, I have a select tag, which is filled with options from server side as below:

<select ng-model="CountryName">
    <option value="IN">India</option>
    <option value="US">United States</option>
    <option value="ML">Malaysia</option>
    <!-- and other 200+ records -->
</select>

I can't use ng-options here! Now, whenever I change the value from select, I get CountryName as IN, US, ML etc.. Moreover, I can't edit values of options because they're used in server side code.

Here I want CountryName as India, United States or Malaysia instead! What can I do?

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.DataTextField = "CountryName"
ddlCountries.DataValueField = "CountryCode"
ddlCountries.DataBind()
ddlCountries.Attributes.Add("ng-model", "CountryName")

Then client side, I have a select tag, which is filled with options from server side as below:

<select ng-model="CountryName">
    <option value="IN">India</option>
    <option value="US">United States</option>
    <option value="ML">Malaysia</option>
    <!-- and other 200+ records -->
</select>

I can't use ng-options here! Now, whenever I change the value from select, I get CountryName as IN, US, ML etc.. Moreover, I can't edit values of options because they're used in server side code.

Here I want CountryName as India, United States or Malaysia instead! What can I do?

• javascript
• angularjs
• angular-ngmodel
• angularjs-ng-options
• angularjs-ng-model

Share Improve this question Follow edited Dec 11, 2014 at 15:50 Ruchir Gupta asked Dec 11, 2014 at 15:33 Ruchir GuptaRuchir Gupta 1,01033 gold badges1111 silver badges2121 bronze badges 14

• 1 <option value="India">India</option> <option value="United States">United States</option> – Kalhan.Toress Commented Dec 11, 2014 at 15:34
• Can't do that... @KalhanoToressPamuditha – Ruchir Gupta Commented Dec 11, 2014 at 15:35
• There's not a clean way of doing what you want. It's better to have the server send the value as what you want. – Joao Leal Commented Dec 11, 2014 at 15:36
• Why cant you use ng-options (get the country list from the server and bind it)? – PSL Commented Dec 11, 2014 at 15:37
• 1 @RuchirGupta That could be because you are not using it the way it needs to be, or your data structure is not what you think it is. Unless you show us how you are using it, it would be difficult for us to guess what the issues is. – PSL Commented Dec 11, 2014 at 15:42

 |  Show 9 more ments

2 Answers 2

Sorted by: Reset to default 3

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:

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

controller:

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

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 = <?php echo 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]);
            }

        }]);
});

本文标签： javascriptAngular JSget selected text as ng model (without ngoptions)Stack Overflow