Angular JS - 获取选定的文本作为ng模型(没有ng选项）

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

本文关键字：ng 模型 没有 选项 文本 JS 获取 Angular      更新时间：2023-09-26

在我的代码隐藏中，我按如下方式填写了一个 DropDownList（使用 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")

然后客户端，我有一个选择标签，里面充满了服务器端的选项，如下所示：

<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>

我不能在这里使用ng-options！现在，每当我从 select 更改值时，我都会CountryName为 IN、US、ML 等。此外，我无法编辑选项的值，因为它们用于服务器端代码。

在这里，我希望CountryName India，United States或Malaysia！我能做什么？

服务器向您发送了哪些数据？

是这样的对象数组吗？

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

如果是，那么您可以轻松地使用 ng-options（即使您不必这样做，它更好）。

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

或者，如果您实际上正在使用服务器端生成的html页面并且没有javascript对象，那么它就有点棘手了：（假设您可以使用 JQuery）：

视图：

<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>

控制器：

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

在 PHP 后端数组中 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]);
            }
        }]);
});

只有 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());
            }
        }]);
});

只有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]);
            }
        }]);
});
相关文章：