Using dynamic values in Angular functions

Question

Using dynamic values in Angular functions

Here is the code snippet I am working with:

$scope.testByValue = function() {
    $scope.fChanged($scope.lists.title);
};

But I am facing an issue on the page where the value for:

$scope.testValue = testValue;

The variable testValue is being assigned an array. How can I ensure that when I do:

ng-click="testByValue(testValue)"

I can access the value of each individual element every time?

Currently, I am able to generate the correct HTML markup, but the value always ends up being the last value stored in testValue.

javascript arrays angularjs

Answer 1

Answer №1

Is there a way to access the value of each individual element separately?

If you have an array called testValue and want to display each element individually upon clicking, you can achieve this by using ng-repeat in AngularJS. Make sure to pass the iterator into the testByValue() function.

<li ng-repeat="item in testValue" ng-click="testByValue(item.title)">
    {{item.id + " - " + item.title}}
</li>

Check out the demo here

Answer 2

Is there a way to access the value of each individual element separately?

If you have an array called testValue and want to display each element individually upon clicking, you can achieve this by using ng-repeat in AngularJS. Make sure to pass the iterator into the testByValue() function.

<li ng-repeat="item in testValue" ng-click="testByValue(item.title)">
    {{item.id + " - " + item.title}}
</li>

Check out the demo here

Answer 3

Answer №2

<div ng-app="myApp" ng-controller="MainCtrl">
        <ul>
            <li ng-repeat="page in pages">
                <a  ng-click="setPageNumber(page)">{{ page }}</a>
            </li>
        </ul>
    </div>

Link to JS Fiddle example

Answer 4

<div ng-app="myApp" ng-controller="MainCtrl">
        <ul>
            <li ng-repeat="page in pages">
                <a  ng-click="setPageNumber(page)">{{ page }}</a>
            </li>
        </ul>
    </div>

Link to JS Fiddle example

Using dynamic values in Angular functions

Answer №1

Answer №2

Similar questions

default radio option with pre-selected value

Searching for documents in MongoDB that meet specific criteria has become possible through the use

Deleting elements from the DOM in Vue.js

The functionality of Angular bootstrap tabs is incompatible with ui-iconpicker

Seasonal selection tool

Encountering error message "Module not found '@angular/compiler-cli/ngcc'" while attempting to run "ng serve" for my application

Determine if an object is already present in a JSON array by comparing their respective IDs

Is there a way to produce a unique color using Stylus CSS?

Ways to eliminate a value once a checkbox is deselected

The arrangement of memory in a C++ struct containing static multi-dimensional arrays

The Javascript function will only initiate upon a manual reload of the page

The functionality of Angular-ui-router becomes compromised when run through gulp for minification

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

How to efficiently handle events for an entire array in Java using a single EventHandler

AngularJS: accessing remote systems - a guide

Material-UI: Issues with functionality arising post library update

Is it possible to implement smooth scrolling in HTML without using anchor animation?

D3 Treemap for handling extensive sets of data

JavaScript and CSS failing to implement lazy loading with fade-in effect

Regular expression in JavaScript that specifically matches numbers formatted in the style of JavaScript