Angularjs - dropdown nicht korrekt binden UND nicht Anfangswert

Question

Ich versuche, Daten über einen Aufruf an ein WebApi innerhalb AngularJS zu erhalten. Ich habe den Service überprüft und bekomme die richtigen Daten.

Das Problem (die Probleme) sind, dass das ausgewählte Element nicht erscheint UND die Bindung an das Modell für das Ergebnis scheint nicht zu funktionieren.

Ich bin ein relativ Neuling in Bezug auf AngularJS. Kann mir bitte jemand sagen, was ich falsch mache und wie ich die Probleme beheben kann?

Vielen Dank im Voraus!

Hier ist der Winkelcode:

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); 
     } 
    } 

); 

Hier ist das Modell von 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; } 
} 

Hier ist die Seite, die ich zu Last bin versucht:

@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> 
} 

ich tun Holen Sie sich die Werte des Dropdown-Menüs. Aber seltsam, in dem generierten Code gibt es eine . Ich vermute, dass dies als leerer Eintrag in der Liste angezeigt wird. Das Dropdown zeigt auch nicht den ausgewählten Anfangswert, obwohl das HTML korrekt zu sein scheint.

Das zweite Problem ist, dass bei der Einreichung des Formulars der ausgewählte Wert nicht an das MVC-Modell gebunden ist.

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

Here is the generated html code

Answer 1

Der Drop-Down zeigt nicht den Anfangswert, da der Wert initialiazed wird, nachdem die Auswahl erstellt wird. Um dies zu beheben, müssen Sie die Werte auf die Auflösung Ihrer Route laden. Beispiel:

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

Und in Ihrem Controller:

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

Dies sollte den ausgewählten Anfangswert beheben.

Darüber nicht verbindlich, ich bin mir nicht sicher, Angular bindet es an das MVC-Modell. Es ist an die Variable $ scope.ContactBy gebunden, die Sie dann an Ihre API senden können.

Auch sollten Sie nur Angular verwenden, um Ihre Seiten zu rendern, es ist nicht notwendig und wird wahrscheinlich seltsames Verhalten verursachen, das es mit ASP.NET vermischt, wie Sie here sehen können.