0
AngularJS内のWebApiを呼び出してデータを取得しようとしています。私はサービスの動作を確認して、正しいデータを取得しています。Angularjs - ドロップダウンが正しくバインドされておらず、初期値が表示されない
問題は、選択した項目が表示されず、結果のモデルへのバインディングが機能していないように見えることです。
私はAngularJSの点では比較的新しい初心者です。誰かが私が間違ってやっていることと問題を解決する方法を教えてもらえますか？
ありがとうございます！ここで
は角度コードである：ここでは
var app = angular.module("GreatWestSoftware", [])
app.controller("ContactMeByController",
function ($scope, $http ,$window) {
function GetContactByMethods($http) {
//$scope.Message = 'NULL';
//$scope.employees = {};
$http.get('http://localhost:53350/api/ContactBy').then(function (response) {
$scope.ContactByMethods = response.data;
$scope.Message = 'OK';
$scope.gotdata = true;
},
function (err) {
$scope.Message = 'Call failed' + err.status + ' ' + err.statusText;
$scope.ContactByMethods = {};
$scope.gotdata = false;
}
);
//window.setTimeout(function() {
// $scope.gotdata = true;
//}, 1000);
};
function ShowAlert(msg)
{
$window.alert(msg);
}
}
);
は、MVCからのモデルである：ここでは
public class SurveyAnswersHeaderViewModel
{
public int ProductID { get; set; }
[Required]
[Display(Name = "Name:")]
public string Name { get; set; }
[EmailAddress]
[Display(Name = "Your Email Address:")]
public string Email { get; set; }
[Phone]
[Display(Name = "Phone Number:")]
[DataType(DataType.PhoneNumber,ErrorMessage ="Invalid Phone Number")]
public string Phone { get; set; }
[Required]
[Display(Description ="How should you be contacted",Name ="Contact Me By:",Prompt ="Select contact method")]
public int ContactBy { get; set; }
}
は、私がロードしようとしていますページです：
@model GreatWestSoftware.Models.SurveyAnswersHeaderViewModel
@{
Layout = "~/Views/Shared/_Layout.cshtml";
ViewBag.Title = "Great West Software Site Survey";
}
@using (Html.BeginForm("Create", "SurveyAnswersHeader", FormMethod.Post))
{
@Html.AntiForgeryToken()
<div class="form-horizontal">
<h4>@ViewBag.SurveyName</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.HiddenFor(m => m.ProductID)
</div>
<div class="form-group">
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Email, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Phone, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Phone, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Phone, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
<div ng-app="GreatWestSoftware" ng-controller="ContactMeByController" ng-show="DisplayContactBy">
@Html.LabelFor(model => model.ContactBy, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10" >
<select id="ContactByDropdown" ng-model="ContactBy" class="form-inline">
<option ng-repeat="ContactByoption in ContactByMethods" ng-selected="{{ContactByoption.IsSelected==true}}" value="{{ContactByoption.ContactByID}}">{{ContactByoption.ContactMeBy}}</option>
</select>
@*@Html.EditorFor(model => model.ContactBy, new { htmlAttributes = new { @class = "form-control" } })*@
@Html.ValidationMessageFor(model => model.ContactBy, "", new { @class = "text-danger" })
</div>
</div>
</div>
<div>
<h4 class="text-danger">@ViewBag.ErrorMessages</h4>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Start Survey" class="btn btn-default" />
</div>
</div>
</div>
}
<div>
@Html.ActionLink("Skip", "Index","Home")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
<script src="~/Scripts/GreatWestSoftware.js"></script>
}
私はありませんドロップダウンの値を取得します。しかし、奇妙なことに、生成されたコードにはがあります。私はこれがリストの空白のエントリとして表示されていると推測しています。 htmlが正しいように見えても、ドロップダウンには選択した初期値が表示されません。
第2の問題は、フォームのサブミットで、選択した値がMVCモデルにバインドされていないことです。
Here is what appears in the dropdown. The correct data...
Here is the generated html code
