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

Question

Le suivant sélectionner l'élément

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

Est-il un moyen d'obtenir MAGIC_THING être égale à la taille actuellement sélectionnée, j'ai donc accès à la taille.le nom et la taille.code dans mon contrôleur?

taille.code affecte beaucoup d'autres parties de l'application (sur l'image, url, etc), mais quand le ng-modèle de l'article.taille.le code est mis à jour, point.taille.le nom doit être mis à jour aussi bien pour l'utilisateur face à des trucs. Je suppose que la bonne façon de le faire est de capturer l'événement de changement et de la configuration des valeurs à l'intérieur de mon contrôleur, mais je ne suis pas sûr de ce que je peut passer en mise à jour pour obtenir les bonnes valeurs.

Si ce n'est absolument pas la voie à suivre à ce sujet, j'aimerais savoir le droit chemin.

Answer 1

Au lieu de définir la ng-modèle à l'élément.taille.le code, comment en la mettant à la taille:

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

Puis dans votre méthode update (), $champ d'application.l'article sera mis à l'élément actuellement sélectionné.

Et quel que soit le code de besoin.taille.code, pouvez obtenir la propriété via $champ d'application.de l'élément.code.

Le violon.

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

Utiliser un autre $champ d'application de la propriété pour votre sélectionnez ng-modèle:

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

Contrôleur:

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

Answer 2

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(template.url)'></select>
 

script.js

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

Answer 3

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

http://plnkr.co/edit/B5TDQJ

Answer 4

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

Answer 5

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 .NET C # Api

 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>