Zuweisen von Benutzer-ID als Wert und Benutzername als ng-Modell zu einem Select-Tag

Question

Meine Frage ist wahrscheinlich einfach, aber ich habe Schwierigkeiten, es zu lösen. Ich entwickle eine Anwendung mit ASP.Net MVC und AngularJS. Und ich verwende select tag, um Benutzer aufzulisten. Ich habe dem select tag denselben ng-model zugewiesen, den ich div für Echtzeitbindung (Benutzernamen) zugewiesen habe.

Meine Frage ist, wenn ich den Artikel (Benutzer) in der select tag ändern und speichern möchte ich mit ID nicht Benutzernamen speichern.

Wie Sie wissen, ng-model ist gleich username und ich möchte es auf diese Weise, aber wenn es um die Daten zu retten kommt, möchte ich Wert verwenden, und ich will es das gleiche wie Benutzer-ID nicht nennen.

<div>{{supervisor}}</div> 
<select ng-model="supervisor"> 
    <option ng-repeat="x in supervisors" ng-selected='supervisor == (x.supervisorfName+" "+x.supervisorlName)'>{{x.supervisorfName+" "+x.supervisorlName}}</option> 
</select> 
<a href="javascript:void(0)" ng-click="updateUserSupervisor()"><i class="fa fa-floppy-o fa-lg" aria-hidden="true"></i></a> 

die oben select tag listet Benutzer aus Datenbanktabelle. Es hat die gleiche ng-model als div oben ... Wenn ich auf das Speichern-Symbol unter der select tag klicke, möchte ich die Datenbanktabelle aktualisieren, aber nicht ng-model verwenden, weil es der Name ist. Stattdessen möchte ich ID verwenden.

Also, wie kann ich ID neben ng-model in einem select tag hinzufügen?

Unten ist der AngularJS Controller-Code, der die Datenbank aufruft:

$http.get('/Home/GetSupervisor') 
    .then(function (response) { 
     $scope.supervisors = response.data; 
    }) 
    .catch(function (e) { 
     console.log("error", e); 
     throw e; 
    }) 
    .finally(function() { 
     console.log("This finally block"); 
    }); 

Und schließlich ist der MVC-Code, unter:

public JsonResult GetSupervisor() 
    { 
     var db = new scaleDBEntities(); 
     return this.Json((from userObj in db.Users 
          select new 
          { 
           supervisorId = userObj.Id, 
           supervisorfName = userObj.usrFirstName, 
           supervisorlName = userObj.usrLastName,         
          }) 
          , JsonRequestBehavior.AllowGet 
         ); 
    } 

Wie gewünscht, unten ist mein Winkelregler:

var myApp = angular.module('myApp', []); 

myApp.controller('mainController', function ($scope, $http) { 
$http.get('/Home/GetUser') 
    .then(function (response) { 
     $scope.users = response.data; 
     $scope.itmNo = response.length;   

    }) 
    .catch(function (e) { 
     console.log("error", e); 
     throw e; 
    }) 
    .finally(function() { 
     console.log("This finally block"); 
    }); 


$http.get('/Home/GetSupervisor') 
    .then(function (response) { 
     $scope.supervisors = response.data; 
    }) 
    .catch(function (e) { 
     console.log("error", e); 
     throw e; 
    }) 
    .finally(function() { 
     console.log("This finally block"); 
    }); 

});

Answer 1

Sie können Ihr ng-Modell als Objekt festlegen (das Ihre Benutzer-/Supervisor-Entität darstellt) und nicht nur den Namen.

Fügen Sie also eine neue Eigenschaft zu Ihrem Bereich namens Supervisor hinzu.

Jetzt können Sie in Ihrer Ansicht die Eigenschaft name verwenden, um den ausgewählten Supervisor-Namen anzuzeigen.

<div>{{supervisor.supervisorfName}} {{supervisor.supervisorlName}}</div> 

<select ng-options="option.supervisorfName for option in supervisors" 
     ng-model="supervisor"></select> 

Wenn Sie speichern müssen, können Sie die ID des ausgewählten Supervisor von der ID-Eigenschaft wie $scope.supervisor.supervisorId

bekommen und in der Möglichkeit, sowohl Vornamen und Nachnamen zu zeigen, müssen Sie einfach verketten

<select ng-options="option.supervisorfName+' ' 
             +option.supervisorlName for option in supervisors" 
     ng-model="supervisor"></select>