【问题标题】:How to get label of an input field when submit a form in Angular JS在Angular JS中提交表单时如何获取输入字段的标签
【发布时间】:2016-09-07 05:31:45
【问题描述】:

我想要实现的是,当我提交表单时,它应该返回我在控制台中选择的选项的标签,但它返回的是选项的值。

预期结果: DXBA-天空

结果获取: 迪拜

HTML

<div class="suggestField">
    <input type='text' list='listid' placeholder="TO" ng-model="toCity" ng- change="suggestCity(toCity)">
    <datalist id='listid'>
          <option ng-repeat="item in fromSuggestData" label='{{item.PlaceId}}' value='{{item.PlaceName}}'>
    </datalist>
    <button ng-click="submitForm(toCity)">SUBMIT</button>
</div>

JS

$scope.fromSuggestData = {
    "PlaceId": "DXBA-sky",
    "PlaceName": "Dubai",
    "CountryId": "AE-sky",
    "RegionId": "",
    "CityId": "DXBA-sky",
    "CountryName": "United Arab Emirates"
}, {
    "PlaceId": "DUJ-sky",
    "PlaceName": "Dubois",
    "CountryId": "US-sky",
    "RegionId": "PA",
    "CityId": "DUJA-sky",
    "CountryName": "United States"
}
$scope.submitForm = function(toCity) {
    console.log(toCity);
}

【问题讨论】:

  • 使用 ng-options 代替 ng-repeat 选项 docs.angularjs.org/api/ng/directive/ngOptions
  • @MarcusH 你能告诉我如何在我的解决方案中使用 ng-option 吗?我是 AngularJS 的新手。
  • 当然,但是请使用当前解决方案在问题中创建一个 plunker 或工作代码 sn-p。还包括完整的控制器。
  • toCity 模型将包含选项的值而不是标签。您必须将值更改为您想要的任何值。
  • @neda 我想显示值中的内容,并且我想在提交时将标签带到控制器。

标签: javascript html angularjs input angularjs-ng-model


【解决方案1】:

这是使用 ng-option 的演示。

var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.fromSuggestData = [{
    "PlaceId": "DXBA-sky",
    "PlaceName": "Dubai",
    "CountryId": "AE-sky",
    "RegionId": "",
    "CityId": "DXBA-sky",
    "CountryName": "United Arab Emirates"
  }, {
    "PlaceId": "DUJ-sky",
    "PlaceName": "Dubois",
    "CountryId": "US-sky",
    "RegionId": "PA",
    "CityId": "DUJA-sky",
    "CountryName": "United States"
  }];
  $scope.submitForm = function(toCity) {
    console.log(toCity);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl" class="suggestField">
  <select id="cityname" ng-model="toCity" ng-options="item as item.PlaceName for item in fromSuggestData">
    <option value="">Select</option>
  </select>
  <button ng-click="submitForm(toCity.PlaceId)">SUBMIT</button>
</div>

【讨论】:

    猜你喜欢
    • 2018-06-07
    • 1970-01-01
    • 2017-01-06
    • 1970-01-01
    • 2018-02-10
    • 2023-03-02
    • 2018-02-09
    • 1970-01-01
    • 2013-08-24
    相关资源
    最近更新 更多