Retrieving data from ng-model using dynamic variable names

Question

Retrieving data from ng-model using dynamic variable names

Instead of bombarding you with lines of code, I decided to create a simple sketch to illustrate my current situation. The abstract picture gives a good overview, while the reality picture shows the actual scenario.

When I click on "Send" within bigBox_1, I want all the inputs from littleBox_1 through littleBox_n inside bigBox_1 to be passed to my function.

What would be the most effective approach to achieve this?

I attempted to dynamically name my ng-models (within littleBox_1 through littleBox_n), but I couldn't find a solution for passing all the parameters.

Here are some key points to consider:

The number of big boxes is unknown
The quantity of little boxes inside each big box varies
The number of little boxes in different big boxes may differ

Reality: https://i.sstatic.net/afMnx.png

Abstract: https://i.sstatic.net/hlQ3l.jpg

The model schema for the boxes: https://i.sstatic.net/ztFFk.png

javascript angularjs

Answer 1

Answer №1

<!DOCTYPE html>
<html ng-app="testApp" ng-controller="testCtrl">
<head>
    <title></title>
</head>
<body>

    <ul>
        <li ng-repeat="box in boxes">
            <label ng-bind="box.id"></label>
            <input type="text" ng-model="box.name" />
        </li>
    </ul>
    <button ng-click="addInput()">Add a new input box</button>
    <button ng-click="startFunction()">Start sending input values</button>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
    <script>
        angular.module("testApp", [])
        .controller("testCtrl", function ($scope) {

            var i = 0;

            $scope.boxes = []; //initialize as empty

            $scope.addInput = function () {
                $scope.boxes.push({ id: i++ });
            }

            $scope.startFunction = function () {
                console.log($scope.boxes);
            }

        });
    </script>
</body>
</html>

Answer 2

<!DOCTYPE html>
<html ng-app="testApp" ng-controller="testCtrl">
<head>
    <title></title>
</head>
<body>

    <ul>
        <li ng-repeat="box in boxes">
            <label ng-bind="box.id"></label>
            <input type="text" ng-model="box.name" />
        </li>
    </ul>
    <button ng-click="addInput()">Add a new input box</button>
    <button ng-click="startFunction()">Start sending input values</button>


    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-rc.0/angular.js"></script>
    <script>
        angular.module("testApp", [])
        .controller("testCtrl", function ($scope) {

            var i = 0;

            $scope.boxes = []; //initialize as empty

            $scope.addInput = function () {
                $scope.boxes.push({ id: i++ });
            }

            $scope.startFunction = function () {
                console.log($scope.boxes);
            }

        });
    </script>
</body>
</html>

Retrieving data from ng-model using dynamic variable names

Answer №1

Similar questions

Challenges with the dropdown menu navigation bar

Is it possible for two Node servers to run at the same time and communicate with each other, with one acting as a mediator

Is it possible to incorporate Vector4's into the geometry of three.js?

Using Express.js to import a SQL file

Setting up dynamic routing in AngularJS for links

Error: Module 'config' not found by Jest

Google Analytics in Next.js Missing Page Title Configuration

Learn how to use lodash to extract the differing values between an array of values and an array of objects

My attempt to execute the JavaScript code was unsuccessful

Tips on having Express automatically designate the Content-Type when utilizing res.render

Using TypeScript to pass an array list as a parameter in the HTTP native GET method

Module import in Ionic

Using Three.js to spin a mesh in the direction of a sphere

Error: Module not located in Custom NPM UI Library catalog

Display Angular template when tab is in use

Limit the text input area in HTML to a fixed size, preventing any text from exceeding the specified boundary

Ways to retrieve the starting position of a span element and then append a value to a hidden field

What steps should I take to turn off caching specifically for directory listings?

Retrieve the keys from the initial object within an array of objects

Connecting the SignalR client to various servers