obtenir l'objet ng sélectionné avec ng-change

Étant donné l'élément de sélection suivant

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

Existe-t-il un moyen d'obtenir MAGIC_THING égal à la taille actuellement sélectionnée, j'ai donc accès à size.nameet size.codedans mon contrôleur?

size.code affecte de nombreuses autres parties de l'application (URL d'image, etc.), mais lorsque le modèle ng de item.size.codeest mis à jour, il item.size.namedoit également être mis à jour pour les utilisateurs. Je suppose que la bonne façon de procéder consiste à capturer l'événement de modification et à définir les valeurs à l'intérieur de mon contrôleur, mais je ne suis pas sûr de ce que je peux passer à la mise à jour pour obtenir les valeurs appropriées.

Si c'est complètement la mauvaise façon de procéder, j'aimerais savoir la bonne façon.

Au lieu de définir le ng-model sur item.size.code, que diriez-vous de le définir à la taille:

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

Ensuite, dans votre update()méthode, $scope.itemsera défini sur l'élément actuellement sélectionné.

Et quel que soit le code nécessaire item.size.code, vous pouvez obtenir cette propriété via $scope.item.code.

Violon .

Mise à jour basée sur plus d'informations dans les commentaires:

Utilisez une autre propriété $ scope pour votre modèle ng sélectionné, puis:

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

Manette:

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

Vous pouvez également obtenir directement la valeur sélectionnée en utilisant le code suivant

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

vous pouvez aussi essayer ceci:

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

Si la réponse de Divyesh Rupawala ne fonctionne pas (en passant l'élément actuel comme paramètre), veuillez voir la onChanged()fonction dans ce Plunker. Il utilise this:

http://plnkr.co/edit/B5TDQJ

<select ng-model="item.size.code">
<option ng-repeat="size in sizes" ng-attr-value="size.code">{{size.name}}          </option>
</select>

//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>

Si vous voulez écrire, nom, id, classe, multiple, requis, vous pouvez écrire de cette façon.

Cela pourrait vous donner quelques idées

.NET C # Voir le modèle

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

Contrôleur Web Api .NET C #

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

}

Contrôleur angulaire:

$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.");
    }
);

Modèle angulaire:

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

Vous devez utiliser "track by" afin que les objets puissent être comparés correctement. Sinon, Angular utilisera la façon native js de comparer les objets.

Donc, votre exemple de code se changerait en -

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

Le filtre d'AngularJS a fonctionné pour moi.

En supposant que le code/idest unique , nous pouvons filtrer cet objet particulier avec AngularJSfilter et travailler avec les propriétés des objets sélectionnés. Considérant l'exemple ci-dessus:

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

Maintenant, il y a 3 aspects importants à cela :

1. ng-init="search.code = item.size.code"- lors de l'initialisation de l' h1élément en dehors de la selectboîte, définissez la requête de filtre sur l' option sélectionnée .

2. ng-change="update(MAGIC_THING); search.code = item.size.code" - lorsque vous modifiez l'entrée de sélection, nous exécutons une ligne de plus qui définira la requête "recherche" sur la sélection actuellement sélectionnée item.size.code .

3. filter:search:true- Passez trueau filtre pour permettre une correspondance stricte .

C'est tout. Si l' IDsize.code est unique , nous n'en aurons qu'unh1 élément avec le texte de size.name.

J'ai testé cela dans mon projet et cela fonctionne.

Bonne chance

C'est le moyen le plus propre d'obtenir une valeur à partir d'une liste d'options de sélection angulaire (autre que l'ID ou le texte). En supposant que vous ayez un produit sélectionné comme celui-ci sur votre page:

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

Ensuite, dans votre contrôleur, définissez la fonction de rappel comme suit:

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

Expliqué simplement: donné que l'événement ng-change ne reconnaît pas les éléments d'option dans la sélection, nous utilisons ngModel pour filtrer l'élément sélectionné de la liste d'options chargée dans le contrôleur.

De plus, puisque l'événement est déclenché avant que le ngModel ne soit vraiment mis à jour, vous pourriez obtenir des résultats indésirables, donc une meilleure façon serait d'ajouter un délai d'attente:

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