Angularjs - 下拉未正確綁定且未顯示初始值

我試圖通過調用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看起來正確，下拉列表也不會顯示選定的初始值。

第二個問題是，在提交表單時，所選值沒有被綁定到MVC模型。

Here is what appears in the dropdown. The correct data...

Here is the generated html code

來源

2016-11-19 Chester West

下拉未示出inital值，因爲在創建選擇後的值被initialiazed。要解決這個問題，你需要加載你的路線決心的值。例子：

$routeProvider 
    .when("/state-name", { 
     templateUrl: "your-template.html", 
     controller: "ContactMeByController", 
     resolve: { 
      contactByMethodsPromise: function($http){ 
       return $http.get('http://localhost:53350/api/ContactBy'); 
     } 
    } 
})

而在你的控制器：

app.controller("ContactMeByController", 
function ($scope, $http , $window, contactByMethodsPromise) { 
    $scope.ContactByMethods = contactByMethodsPromise; 
}

這應該可以解決的選擇初始值。

關於它沒有綁定，我不確定Angular綁定到MVC模型。它綁定到變量$ scope.ContactBy，然後你可以提交給你的API。

另外，你應該考慮只使用Angular來渲染你的頁面，這是沒有必要的，並且可能會導致奇怪的行爲與ASP.NET混合，你可以看到here。

來源

2016-11-19 04:58:32 mcrvaz

Angularjs - 下拉未正確綁定且未顯示初始值

回答

相關問題