【问题标题】:How to set an option value in <md-option> of <md-select> from controller using AngularJS?如何使用 AngularJS 在控制器的 <md-select> 的 <md-option> 中设置选项值?
【发布时间】:2016-06-25 06:11:35
【问题描述】:

我已经关注了相关的 HTML 代码:

<form name="bankDetailsForm" action="save" method="POST" ng-init="getBankDetails()">
  <md-input-container class="md-block" style="margin-top:0px;" flex=100> 
    <label>Transaction Type</label> 
    <md-select required ng-model="bankDetails.transactionType" ng-change="editField()"> 
      <md-option ng-repeat="type in transactionTypes" value="{{type}}">{{type}} 
      </md-option> 
    </md-select>
    <div ng-messages="bankDetailsForm.transactionType.$error">
      <div ng-message="required">Please select Transaction type</div>
    </div>
  </md-input-container>
</form>

各自的控制器代码如下:

var app = angular.module('app_name');
var isEmpty = true;

app.controller("bankDetailsController", [ "$scope", "$http", "config", "$mdToast", function($scope, $http, config, $mdToast) {
  $scope.bankDetails = {};
  $scope.transactionTypes = {
                NEFT : "NEFT",
                IMPS : "IMPS",
                WALLET : "WALLET",
               };
  $scope.getBankDetails = function() {
    $http.get(config.webServicesUrl.bankDetails, headerConfig).success(function(data) {
      if (data.body) {
        $scope.bankDetails.transactionTypes = $scope.transactionTypes.IMPS;
        isEmpty = false;
      }
    }).error(function(error) {
      console.log("Error : " + error.error);
    });
  };
}]);

我希望在表单加载时的交易类型下拉列表中选择值“IMPS”。

我试过了,但我做不到。 那么有人可以更正我的代码以便在下拉列表中预设值“IMPS”吗?

谢谢。

附注: 请忽略 ng-change="editField()" 和其他变量。它们已在配置文件中定义,并且工作正常。所以请忽略它们。

【问题讨论】:

  • 您确定您通过 $http 的 AJAX 请求成功并且您在响应中获得了一些 body 属性吗?

标签: javascript angularjs html-select options selected


【解决方案1】:

这是一个拼写错误。据此,ng-model="bankDetails.transactionType",您的选择期待transactionType,但您正在填充transactionTypes

更改以下内容

$scope.bankDetails.transactionTypes = $scope.transactionTypes.IMPS;

$scope.bankDetails.transactionType = $scope.transactionTypes.IMPS;

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多