Het NG-object krijgen dat is geselecteerd met NG-Change

Antwoord 7

Dit geeft je misschien wat ideeën

.NET C# Model bekijken

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

Hoekcontroller:

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

Hoekige sjabloon:

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

Antwoord 8

Je moet “track by” gebruiken om de objecten correct te kunnen vergelijken. Anders gebruikt Angular de native js-manier om objecten te vergelijken.

Dus je voorbeeldcode zou veranderen in –

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

Antwoord 9

Het filter van AngularJSwerkte voor mij.

Ervan uitgaande dat de code/iduniekis, kunnen we dat specifieke object uitfilteren met het filtervan AngularJS en werken met de geselecteerde objecteigenschappen. Gezien het bovenstaande voorbeeld:

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

Nu zijn er 3 belangrijke aspecten:

1. ng-init="search.code = item.size.code"– bij het initialiseren van het h1-element buiten het vak select, stel de filterquery in op de geselecteerde optie.

2. ng-change="update(MAGIC_THING); search.code = item.size.code"– wanneer u de geselecteerde invoer wijzigt, voeren we nog een regel uit die stel de “zoek”-query in op de momenteel geselecteerde item.size.code.

3. filter:search:true– Geef truedoor om te filteren om strikte matchingin te schakelen.

Dat is het. Als de size.codeuniqueIDis, hebben we slechts één h1-element met de tekst size.name.

Ik heb dit in mijn project getest en het werkt.

Veel succes

Antwoord 10

Dit is de schoonste manier om een ​​waarde te krijgen uit een hoekige keuzelijst (anders dan The Id of Text).
Ervan uitgaande dat u een Product Select zoals dit op uw pagina heeft staan:

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

Stel vervolgens in Uw controller de callback-functie als volgt in:

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

Eenvoudig uitgelegd:aangezien de ng-change-gebeurtenis de optie-items in de select niet herkent, gebruiken we het ngModel om het geselecteerde item uit de optielijst die in de controller is geladen te filteren.

Bovendien, aangezien de gebeurtenis wordt geactiveerd voordat het ngModel echt is bijgewerkt, kunt u ongewenste resultaten krijgen, dus een betere manier zou zijn om een ​​time-out toe te voegen:

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