Question

单击按钮时如何在angulajs中获取选定的值，请使用以下代码，建议我？

 <div class="form-inline">
       <div class="form-group">
           <select class="form-control" data-ng-model="selectedTimeZone">
                <option data-ng-repeat-start="(key, value) in timeZoneData.countries" data-ng-bind="value.name"></option>
                 <option data-ng-repeat-end="" data-ng-repeat="tz in value.timezones" data-ng-bind="' - ' + tz"></option>
         </select>
    </div>
   <div class="form-group">
     <input id="btnAddTimeZone" type="button" value="Add Time Zone" class="btn btn-default" data-ng-click="populateTimeZone(selectedTimeZone)"/>
    </div>
</div>

在控制器中-

$scope.populateTimeZone = function (world_timezones) {

};

Json数据-

{
    "countries": {
     "US": {
          "id": "US",
          "name": "United States",
          "timezones": [
            "America/New_York",
            "America/Detroit",
             ]
        },
     "CA": {
          "id": "CA",
          "name": "Canada",
          "timezones": [
            "America/St_Johns",
            "America/Halifax",
           ]
        },
    "IN": {
          "id": "IN",
          "name": "India",
          "timezones": [
            "Asia/Kolkata"
          ]
        },
    }
    }

但是我得到的是空字符串。

Answer 1

来自AngularJS文档：

要将模型绑定到非字符串值，可以使用以下策略之一：

ngOptions指令（选择）
ngValue指令，该指令允许将任意表达式作为选项值（示例）
使用$ parsers / $ formatters模型转换字符串值（示例）

https://docs.angularjs.org/api/ng/directive/select

选项1：添加ng-value

您需要做的就是在您的选项中添加一个ng-value，它应该可以工作。您可能还想在组标题中添加ng-disabled="true"，以防止用户选择“印度”，而不是实际的时区。

<option ng-repeat-start="(key, value) in timezones.countries" ng-bind="value.name" ng-disabled="true"></option>
<option ng-repeat-end="" ng-repeat="tz in value.timezones" ng-bind="' - ' + tz" ng-value="tz"></option>

Plunkr：https://next.plnkr.co/edit/l5H87H8k7Af5XIqH?open=lib%2Fscript.js&deferRun=1

选项2：ng-options，分组依据

这是在选择上使用ng-options的可能解决方案。您仍然可以通过按国家/地区名称对时区进行分组的功能来实现分组。

HTML

<form>
    <label>Timezone: </label>
    <select class="form-control" ng-model="selectedTimezone" ng-options="tz.timezone group by tz.country for tz in timezones"></select>
</form>
<button class="btn btn-secondary" ng-click="populateTimeZone()">Add Timezone</button>

JavaScript

function MainCtrl($scope, MainService) {
    $scope.selectedTimezone = undefined;
    $scope.timezones = [];

    MainService.loadTimezones().then(function(timezoneData){
        $scope.timezones = Object.values(timezoneData.countries).flatMap(c => {
            return c.timezones.map(tz => {
                return {id: c.id, name: c.name, timezone: tz};
            });
        });
    });

    $scope.populateTimeZone = function(){
        console.log('selectedTimezone', $scope.selectedTimezone);
    };
}

Plunkr：https://next.plnkr.co/edit/Y4AVNU9X6MUAzckz?open=lib%2Fscript.js&deferRun=1

如何在angularjs中单击按钮获得选定的值？

1 个答案: