AngularJS: Exploring the Connection with Array Elements

Question

AngularJS: Exploring the Connection with Array Elements

When working with AngularJS, I've noticed that I can easily bind text inputs to elements within arrays:

<input type="text" ng-model="foo[2]" />

Is this a feature provided by AngularJS or simply happening by coincidence?

However, when attempting to bind select elements or checkbox inputs to array elements, they do not seem to function properly - for example, the select element does not update the displayed value upon selection and the checkbox remains unchecked even after being clicked.

Could there be something that I am overlooking in my code?

Update: Interestingly, it seems to work perfectly fine in JSFiddle: http://jsfiddle.net/azFzc/

javascript arrays angularjs data-binding

Answer 1

Answer №1

Yes, this code snippet is functional with certain elements

To see it in action, check out this jsfiddle http://jsfiddle.net/fStE8/

Here's the HTML snippet:

<div ng-app>
<div ng-controller="MyController">
    Select
<select ng-change="changed()" 
        ng-options="option.value as option.label for option in options" ng-model="ar[0]">
 </select>
</div>
</div>

And here's the corresponding JavaScript:

function MyController($scope){
    $scope.options = [
        { label : "first element", value : 0 },
        { label : "second element", value : 1 },
    ]

    $scope.ar = [];
    $scope.ar[0] = 0;

    $scope.changed = function(){
         console.log($scope.ar[0]);
    }
}

Answer 2

Yes, this code snippet is functional with certain elements

To see it in action, check out this jsfiddle http://jsfiddle.net/fStE8/

Here's the HTML snippet:

<div ng-app>
<div ng-controller="MyController">
    Select
<select ng-change="changed()" 
        ng-options="option.value as option.label for option in options" ng-model="ar[0]">
 </select>
</div>
</div>

And here's the corresponding JavaScript:

function MyController($scope){
    $scope.options = [
        { label : "first element", value : 0 },
        { label : "second element", value : 1 },
    ]

    $scope.ar = [];
    $scope.ar[0] = 0;

    $scope.changed = function(){
         console.log($scope.ar[0]);
    }
}

Answer 3

Answer №2

In the following demonstration, I have customized the example to illustrate non-numeric array assignment through binding. This technique proves most beneficial when dealing with intricate data structures or when your array utilizes a key system for updating and accessing values.

Check out the modified example here

HTML

<div ng-app>
<div ng-controller="MyController">
    Select
<select ng-change="changed()" 
        ng-options="option.value as option.label for option in options" ng-model="ar['SomeId']">
 </select>
</div>
</div>

JS

function MyController($scope){
    $scope.options = [
        { label : "first element", value : '1' },
        { label : "second element", value : '2' },
    ]

    $scope.ar = [];
    $scope.ar['SomeId'] = '1';

    $scope.changed = function(){
         console.log($scope.ar['SomeId']);
    }
}

Answer 4

In the following demonstration, I have customized the example to illustrate non-numeric array assignment through binding. This technique proves most beneficial when dealing with intricate data structures or when your array utilizes a key system for updating and accessing values.

Check out the modified example here

HTML

<div ng-app>
<div ng-controller="MyController">
    Select
<select ng-change="changed()" 
        ng-options="option.value as option.label for option in options" ng-model="ar['SomeId']">
 </select>
</div>
</div>

JS

function MyController($scope){
    $scope.options = [
        { label : "first element", value : '1' },
        { label : "second element", value : '2' },
    ]

    $scope.ar = [];
    $scope.ar['SomeId'] = '1';

    $scope.changed = function(){
         console.log($scope.ar['SomeId']);
    }
}

AngularJS: Exploring the Connection with Array Elements

Answer №1

Answer №2

Similar questions

Unit testing different views in UI-Router with angularJS $stateProvider: Best practices

How to open a new tab and redirect page in ASP.NET when a dropdown list item is selected, using the selected index changed event

Building an HTML5-powered mobile application that runs seamlessly across all platforms

Pass a variable value as a parameter to a jQuery function using code-behind

Transform a string into an array using a specific key

Choose components identified by a dot

AngularJS Templates With In-line Logic

Retrieving a value using forEach in protractor - Dealing with closures

AngularJS: Enhancing Dropdown Menus

Modify the color of the select element when it is in an open state

Distinguishing Jquery and Ajax

Do not include any null or empty objects when assigning to an array in Mongoose

What is the reason behind not being able to reference a variable in an object with v-bind parameters

What is the best way to create an array of objects in the main function?

When making axios calls from React to a Node.js server, sometimes the `req.body` object

What could have caused these errors, since they never made an appearance?

What is the simplest method for moving cells between two tables using drag and drop?

What is the syntax for defining "skills[]" in an AngularJS input field of type text?

Convert the button element to an image

What is preventing me from loading a JavaScript script using a regular working URL?