web-dev-qa-db-fra.com

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

Étant donné l'élément select 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 de faire en sorte que MAGIC_THING soit égal à la taille actuellement sélectionnée, afin que je puisse accéder à size.name et size.code dans mon contrôleur?

size.code affecte beaucoup d'autres parties de l'application (URL de l'image, etc.), mais lorsque le modèle ng de item.size.code est mis à jour, item.size.name doit également être mis à jour pour l'utilisateur. 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 totalement la mauvaise façon de s'y prendre, j'aimerais bien savoir la bonne façon.

angularjs
296
Patrick

Au lieu de définir ng-model sur item.size.code, pourquoi ne pas 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 méthode update(), $scope.item sera 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.

Fiddle .

Update basé sur plus d'informations dans les commentaires:

Utilisez une autre propriété $ scope pour votre modèle 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 ...
}
469
Mark Rajcok

Vous pouvez également obtenir directement la valeur sélectionnée à l'aide du 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);
}
57
Divyesh Rupawala

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

Si la réponse de Divyesh Rupawala ne fonctionne pas (en passant l'élément en tant que paramètre), veuillez consulter la fonction onChanged() dans ce Plunker. Il utilise 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>

Si vous voulez écrire, nom, id, classe, plusieurs, requis, vous pouvez écrire de cette manière.

2
barış çıracı

Filtre AngularJS travaillé pour moi.

En supposant que code/id est unique, nous pouvons filtrer cet objet particulier avec la variable filter d'AngularJS et utiliser 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'élément h1 en dehors de la case select, définissez la requête de filtre sur l'option selected.

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

  3. filter:search:true - Passez true au filtre pour activer la correspondance stricte.

C'est tout. Si le size.code est uniqueID, nous n'aurons qu'un seul élément h1 avec le texte size.name.

J'ai testé cela dans mon projet et ça marche.

Bonne chance

1
Akash

Cela pourrait vous donner quelques idées 

Modèle de vue .NET C # 

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

Contrôleur Api Web .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.");
    }
);

Gabarit 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>
1
meffect

Vous devez utiliser "suivi par" pour que les objets puissent être comparés correctement. Sinon, Angular utilisera la méthode native de comparaison d’objets en js.

Ainsi, votre exemple de code deviendrait -

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

C’est le moyen le plus simple 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 de sélection 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);
    }

Explication simple: L'événement ng-change ne reconnaissant pas les éléments d'option de la sélection, nous utilisons le modèle ngModel pour filtrer l'élément sélectionné dans la liste d'options chargée dans le contrôleur.

De plus, étant donné que l'événement est déclenché avant que le ngModel ne soit réellement mis à jour, vous pourriez obtenir des résultats indésirables. Un meilleur moyen serait donc 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);
        };
0
Sagi