When utilizing track by in ng-options, the selectbox value fails to update accordingly

Question

When utilizing track by in ng-options, the selectbox value fails to update accordingly

Using track by in ng-options causes Angular to not update the selectbox value immediately, even after a selection is made. It seems to work correctly on the second try, even when the model value is already set.

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.items = [
        ['ali', 'ali']
    ];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        value: {{selected}} <br><br>
        <select 
            ng-options="item[0] as item[1] for item in items track by item[0]"
            ng-model="selected"></select>
  </fieldset>
</div>

javascript angularjs angular-ngmodel ng-options angularjs-ng-options

Answer 1

Answer №1

The solution can be found in the documentation (https://docs.angularjs.org/api/ng/directive/ngOptions - refer to the section "select as and track by")

It appears that combining track by with certain select as expressions may not work.

However, a workaround is to use

ng-options="item as item[1] for item in items track by item[0]"

instead of

ng-options="item[0] as item[1] for item in items track by item[0]"

Check out this example: https://jsfiddle.net/b9upojmb/1/

Answer 2

The solution can be found in the documentation (https://docs.angularjs.org/api/ng/directive/ngOptions - refer to the section "select as and track by")

It appears that combining track by with certain select as expressions may not work.

However, a workaround is to use

ng-options="item as item[1] for item in items track by item[0]"

instead of

ng-options="item[0] as item[1] for item in items track by item[0]"

Check out this example: https://jsfiddle.net/b9upojmb/1/

Answer 3

Answer №2

Using track by in AngularJS is intended for objects, not array elements. It is recommended to use objects instead of arrays. Here is an example:

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.items = [
        { id :1, value : 'ali'},
        { id :2, value : 'ahmed'}
    ];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        value: {{selected}} <br><br>
        <select 
            ng-options="item as item.value for item in items track by item.id"
            ng-model="selected"></select>
  </fieldset>
</div>

Answer 4

Using track by in AngularJS is intended for objects, not array elements. It is recommended to use objects instead of arrays. Here is an example:

var myapp = angular.module('myapp', []);
myapp.controller('FirstCtrl', function ($scope) {
    $scope.items = [
        { id :1, value : 'ali'},
        { id :2, value : 'ahmed'}
    ];
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        value: {{selected}} <br><br>
        <select 
            ng-options="item as item.value for item in items track by item.id"
            ng-model="selected"></select>
  </fieldset>
</div>

Answer 5

Answer №3

When using the track by feature in AngularJS, make sure to pass an array of objects so that you can track by any object properties.

var myapp = angular.module('myapp', []);
myapp.controller('SecondCtrl', function ($scope) {
$scope.items = [
                    { name : "carol" },
                    { name : "dave" },
                    { name : "emma" }
               ]

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<div ng-app="myapp">
    <fieldset ng-controller="SecondCtrl">
        value: {{selected}} <br><br>
        <select 
            ng-options="item as item.name for item in items track by item.name"
            ng-model="selected"></select>
  </fieldset>
</div>

Answer 6

When using the track by feature in AngularJS, make sure to pass an array of objects so that you can track by any object properties.

var myapp = angular.module('myapp', []);
myapp.controller('SecondCtrl', function ($scope) {
$scope.items = [
                    { name : "carol" },
                    { name : "dave" },
                    { name : "emma" }
               ]

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<div ng-app="myapp">
    <fieldset ng-controller="SecondCtrl">
        value: {{selected}} <br><br>
        <select 
            ng-options="item as item.name for item in items track by item.name"
            ng-model="selected"></select>
  </fieldset>
</div>

When utilizing track by in ng-options, the selectbox value fails to update accordingly

Answer №1

Answer №2

Answer №3

Similar questions

Tips for implementing data-autoload, data-origin, and data-callback script tags in Angular with typescript

Attempting to showcase the information in my customized SharePoint Online list through a Web Part Page utilizing AngularJS

Solution for problem with IE scrollWidth

The function is receiving an empty array of objects

Using jQuery to verify the status of every input when the page loads

Retrieving the output from a nested function within a function in a Node.js application connected to a

Diving into Redux brings up the question of whether to use a generic reducer or a

Incorrect implementation of Bootstrap CSS in Jade template

I am struggling to link my JS application with a PHP file as it is showing "PHP file not found

Tips for preventing unstyled content flash when updating CSS files dynamically

Prevent duplicate submissions by disabling the ASP.NET Forms button after it has been clicked

Set up a single array containing multiple objects in a table, each with its own unique set of keys

What is the best method for initializing the value of ng-model as an empty string in AngularJS?

Making AJAX requests to retrieve data from a JSON database array, then utilizing the CSS visibility property to conceal HTML elements dynamically

Achieving responsive masonry layout with Bootstrap 4

Using jQuery to implement tiered radio buttons styled with Bootstrap

What is the proper method for submitting a mail form via AJAX without using jQuery?

Puppeteer with Typescript: Encountering issues during the transpilation process

The variable that was posted is not being successfully transferred within the query

Console log showing no response from AJAX request