it-swarm.com.de

ng-object mit ng-change auswählen

Gegeben das folgende Auswahlelement

<select ng-options="size.code as size.name for size in sizes " 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING)">
</select>

Gibt es eine Möglichkeit, MAGIC_THING mit der aktuell ausgewählten Größe gleichzusetzen, sodass ich auf size.name und size.code in meinem Controller zugreifen kann?

size.code wirkt sich auf viele andere Teile der App aus (Bild-URLs usw.), aber wenn das ng-Modell von item.size.code aktualisiert wird, muss item.size.name auch für den Benutzer aktualisiert werden, der mit Sachen konfrontiert ist. Ich gehe davon aus, dass der korrekte Weg, dies zu tun, darin besteht, das Änderungsereignis zu erfassen und die Werte in meinem Controller festzulegen, aber ich bin nicht sicher, was ich in update weitergeben kann, um die richtigen Werte zu erhalten.

Wenn dies völlig der falsche Weg ist, würde ich gerne den richtigen Weg finden.

296
Patrick

Anstatt ng-model auf item.size.code zu setzen, können Sie es auf size setzen:

<select ng-options="size as size.name for size in sizes" 
   ng-model="item" ng-change="update()"></select>

In Ihrer update()-Methode wird $scope.item auf das aktuell ausgewählte Element gesetzt.

Und welcher Code item.size.code auch benötigt wird, kann diese Eigenschaft über $scope.item.code abrufen.

Fiddle .

Update basierend auf mehr Informationen in Kommentaren:

Verwenden Sie eine andere $ scope-Eigenschaft für Ihr ausgewähltes Modell und dann:

<select ng-options="size as size.name for size in sizes" 
   ng-model="selectedItem" ng-change="update()"></select>

Regler:

$scope.update = function() {
   $scope.item.size.code = $scope.selectedItem.code
   // use $scope.selectedItem.code and $scope.selectedItem.name here
   // for other stuff ...
}
469
Mark Rajcok

Sie können den ausgewählten Wert auch direkt mit folgendem Code abrufen

 <select ng-options='t.name for t in templates'
                  ng-change='selectedTemplate(t.url)'></select>

script.js

 $scope.selectedTemplate = function(pTemplate) {
    //Your logic
    alert('Template Url is : '+pTemplate);
}
57

sie können dies auch versuchen:

<select  ng-model="selectedItem" ng-change="update()">
<option ng-repeat="item in items" ng-selected="selectedItem == item.Id" value="{{item.Id}}">{{item.Name}}</option>
</select>
13
DolceVita

Wenn die Antwort von Divyesh Rupawala nicht funktioniert (das aktuelle Element wird als Parameter übergeben), lesen Sie bitte die Funktion onChanged() in diesem Plunker. Es verwendet this:

http://plnkr.co/edit/B5TDQJ

7
jmb-mage
<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}}          </option>
</select>
2
Jignesh Variya

//Javascript
$scope.update = function () {
    $scope.myItem;
    alert('Hello');
}
<!--HTML-->
<div class="form-group">
     <select name="name"
             id="id" 
             ng-model="myItem" 
             ng-options="size as size.name for size in sizes"
             class="form-control" 
             ng-change="update()"
             multiple
             required>
     </select>
</div>

Wenn Sie schreiben möchten, Name, ID, Klasse, mehrere, erforderlich, können Sie auf diese Weise schreiben.

2

AngularJS's Filter hat für mich geklappt.

Unter der Annahme, dass code/idunique ist, können wir das betreffende Objekt mit der filter von AngularJS herausfiltern und mit den ausgewählten Objekteigenschaften arbeiten. Betrachten Sie das obige Beispiel:

<select ng-options="size.code as size.name for size in sizes" 
        ng-model="item.size.code" 
        ng-change="update(MAGIC_THING); search.code = item.size.code">
</select>

<!-- OUTSIDE THE SELECT BOX -->

<h1 ng-repeat="size in sizes | filter:search:true"
    ng-init="search.code = item.size.code">
  {{size.name}}
</h1>

Nun gibt es 3 wichtige Aspekte dazu :

  1. ng-init="search.code = item.size.code" - Bei der Initialisierung des h1-Elements außerhalb des select-Felds setzen Sie die Filterabfrage auf die ausgewählte Option.

  2. ng-change="update(MAGIC_THING); search.code = item.size.code" - Wenn Sie die Auswahleingabe ändern, wird eine weitere Zeile ausgeführt, in der die Suchabfrage auf den aktuell ausgewählten item.size.code gesetzt wird.

  3. filter:search:true - Pass true zum Filtern, um strikte Übereinstimmung zu aktivieren.

Das ist es. Wenn size.codeuniqueID ist, haben wir nur ein h1-Element mit dem Text von size.name.

Ich habe das in meinem Projekt getestet und es funktioniert.

Viel Glück

1
Akash

Dies könnte Ihnen einige Ideen geben 

.NET C # -Ansichtsmodell 

public class DepartmentViewModel
{
    public int Id { get; set; }
    public string Name { get; set; }
}

.NET C # Web API-Controller

public class DepartmentController : BaseApiController
{
    [HttpGet]
    public HttpResponseMessage Get()
    {
        var sms = Ctx.Departments;

        var vms = new List<DepartmentViewModel>();

        foreach (var sm in sms)
        {
            var vm = new DepartmentViewModel()
            {
                Id = sm.Id,
                Name = sm.DepartmentName
            };
            vms.Add(vm);
        }

        return Request.CreateResponse(HttpStatusCode.OK, vms);
    }

}

Winkelsteuerung:

$http.get('/api/department').then(
    function (response) {
        $scope.departments = response.data;
    },
    function (response) {
        toaster.pop('error', "Error", "An unexpected error occurred.");
    }
);

$http.get('/api/getTravelerInformation', { params: { id: $routeParams.userKey } }).then(
   function (response) {
       $scope.request = response.data;
       $scope.travelerDepartment = underscoreService.findWhere($scope.departments, { Id: $scope.request.TravelerDepartmentId });
   },
    function (response) {
        toaster.pop('error', "Error", "An unexpected error occurred.");
    }
);

Winkelschablone:

<div class="form-group">
    <label>Department</label>
    <div class="left-inner-addon">
        <i class="glyphicon glyphicon-hand-up"></i>
        <select ng-model="travelerDepartment"
                ng-options="department.Name for department in departments track by department.Id"
                ng-init="request.TravelerDepartmentId = travelerDepartment.Id"
                ng-change="request.TravelerDepartmentId = travelerDepartment.Id"
                class="form-control">
            <option value=""></option>
        </select>
    </div>
</div>
1
meffect

Sie müssen "track by" verwenden, damit die Objekte korrekt verglichen werden können. Andernfalls verwendet Angular die native js-Methode zum Vergleichen von Objekten.

Ihr Beispielcode würde sich also in - ändern.

    <select ng-options="size.code as size.name
 for size in sizes track by size.code" 
ng-model="item.size.code"></select>
0
dworrad

Dies ist der sauberste Weg, um einen Wert aus einer Liste mit Auswahloptionen für Winkel (außer der ID oder dem Text) abzurufen. Angenommen, Sie haben eine Produktauswahl wie diese auf Ihrer Seite:

<select ng-model="data.ProductId"
        ng-options="product.Id as product.Name for product in productsList"
        ng-change="onSelectChange()">
</select>

Stellen Sie dann in Ihrem Controller die Rückruffunktion so ein:

    $scope.onSelectChange = function () {
        var filteredData = $scope.productsList.filter(function (response) {
            return response.Id === $scope.data.ProductId;
        })
        console.log(filteredData[0].ProductColor);
    }

Einfach erklärt: Da das ng-change-Ereignis die Optionselemente im select nicht erkennt, verwenden wir das ngModel, um das ausgewählte Element aus der im Controller geladenen Optionsliste herauszufiltern.

Da das Ereignis ausgelöst wird, bevor das ngModel wirklich aktualisiert wird, erhalten Sie möglicherweise unerwünschte Ergebnisse. Ein besserer Weg wäre das Hinzufügen eines Timeouts:

        $scope.onSelectChange = function () {
            $timeout(function () {
            var filteredData = $scope.productsList.filter(function (response) {
                return response.Id === $scope.data.ProductId;
            })
            console.log(filteredData[0].ProductColor);
            }, 100);
        };
0
Sagi