Steer clear of replicating angular elements in the ng-model aspect

Question

Steer clear of replicating angular elements in the ng-model aspect

Whenever I click on the add button, new inputs are dynamically added.

Here is an example on JSBin for you to review my problem.

Each time I press the mentioned button, a new input should appear. Currently, there are 2 forms/boxes visible in the same view generated by ng-repeat with separate inputs and an individual add more button. The issue arises when I click the button, two new inputs show up in different forms instead of just one in the current form.

    <div>
        <div ng-repeat="op in operation track by $index">
            <p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
            <input ng-model="operation.detailText" type="text"></input>
            <div>
                <div ng-repeat="operation in operations track by $index">

                    <input ng-model="operation.detailText" type="text"></input>

                </div>
                <button ng-click="operations.push({})">Add one more</button>
            </div>
        </div>
    </div>

JS:

angular.module('ionicApp',[])

.controller('mainCtrl', function($scope) {

    $scope.operations = [];

    $scope.operation = [];

    $scope.operation = [{
                    title    : 'Operación 170794',
                    duration : '3600',
                    status   : '0'
                  }, {
                    title    : 'Operación 981922',
                    duration : '60',
                    status   : '0'
                  }];

});

javascript angularjs

Answer 1

Answer №1

It is crucial to maintain clarity in your code by distinguishing between different concepts (such as operations versus operationTypes) and avoiding blending them together. Using distinct names for variables can help prevent confusion in your code.

You can view the code example at: jsbin.com/hujerurivu/1/edit?html,css,js,output

angular.module('ionicApp',[]).controller('mainCtrl', function($scope) {
    $scope.operationTypes = [{
                    title    : 'Operación 170794',
                    duration : '3600',
                    status   : '0'
                  }, {
                    title    : 'Operación 981922',
                    duration : '60',
                    status   : '0'
                  }];

    $scope.operations = {};
    angular.forEach($scope.operationTypes, function(operationType){
        $scope.operations[operationType.title] = [];
    });
});

--

<div class="panel panel-default">
    <div class="panel-body" ng-repeat="operationType in operationTypes track by $index">
        <p>{{operationType.title}} | {{operationType.duration}} | {{operationType.status}}</p>
        <div>
            <div ng-repeat="operation in operations[operationType.title] track by $index">
                <input ng-model="operation.detailText" type="text"></input>
            </div>
            <button ng-click="operations[operationType.title].push({})">Add one more</button>
        </div>
    </div>
</div>

Answer 2

It is crucial to maintain clarity in your code by distinguishing between different concepts (such as operations versus operationTypes) and avoiding blending them together. Using distinct names for variables can help prevent confusion in your code.

You can view the code example at: jsbin.com/hujerurivu/1/edit?html,css,js,output

angular.module('ionicApp',[]).controller('mainCtrl', function($scope) {
    $scope.operationTypes = [{
                    title    : 'Operación 170794',
                    duration : '3600',
                    status   : '0'
                  }, {
                    title    : 'Operación 981922',
                    duration : '60',
                    status   : '0'
                  }];

    $scope.operations = {};
    angular.forEach($scope.operationTypes, function(operationType){
        $scope.operations[operationType.title] = [];
    });
});

--

<div class="panel panel-default">
    <div class="panel-body" ng-repeat="operationType in operationTypes track by $index">
        <p>{{operationType.title}} | {{operationType.duration}} | {{operationType.status}}</p>
        <div>
            <div ng-repeat="operation in operations[operationType.title] track by $index">
                <input ng-model="operation.detailText" type="text"></input>
            </div>
            <button ng-click="operations[operationType.title].push({})">Add one more</button>
        </div>
    </div>
</div>

Answer 3

Answer №2

When working with JavaScript objects that point to the same array, you'll get the same output because objects are referenced and arrays are objects. To keep the lists separate, add a key named operations to each object.

To achieve this, modify your operation objects as shown below:

angular.module('ionicApp',[])

.controller('mainCtrl', function($scope) {
    $scope.operation = [{
      title    : 'Operación 170794',
      duration : '3600',
      status   : '0',
      operations: []
    }, {
      title    : 'Operación 981922',
      duration : '60',
      status   : '0',
      operations: []
    }];

});

Update your loops in the following manner:

<div class="panel-body" ng-repeat="op in operation track by $index">
                <p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
                <input ng-model="operation.detailText" type="text"></input>
                <div>
                    <div ng-repeat="operation in op.operations track by $index">

                        <input ng-model="operation.detailText" type="text"></input>

                    </div>
                    <button ng-click="op.operations.push({})">Add one more</button>
                </div>
            </div>

You can also include an index for each operation pushed to the operations list and filter using ng-if:

<div class="panel-body" ng-repeat="op in operation track by $index">
    <p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
    <input ng-model="operation.detailText" type="text"></input>
    <div>
        <div ng-repeat="operation in operations track by $index" ng-if="operation._index === $index">

            <input ng-model="operation.detailText" type="text"></input>

        </div>
        <button ng-click="addOperation($index)">Add one more</button>
    </div>
</div>

angular.module('ionicApp',[])

.controller('mainCtrl', function($scope) {
    $scope.operations = [];

    $scope.operation = [{
      title    : 'Operación 170794',
      duration : '3600',
      status   : '0'
    }, {
      title    : 'Operación 981922',
      duration : '60',
      status   : '0'
    }];

    $scope.addOperation = function(index){
        $scope.operations.push({
            _index: index
        });
    };
});

Answer 4

When working with JavaScript objects that point to the same array, you'll get the same output because objects are referenced and arrays are objects. To keep the lists separate, add a key named operations to each object.

To achieve this, modify your operation objects as shown below:

angular.module('ionicApp',[])

.controller('mainCtrl', function($scope) {
    $scope.operation = [{
      title    : 'Operación 170794',
      duration : '3600',
      status   : '0',
      operations: []
    }, {
      title    : 'Operación 981922',
      duration : '60',
      status   : '0',
      operations: []
    }];

});

Update your loops in the following manner:

<div class="panel-body" ng-repeat="op in operation track by $index">
                <p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
                <input ng-model="operation.detailText" type="text"></input>
                <div>
                    <div ng-repeat="operation in op.operations track by $index">

                        <input ng-model="operation.detailText" type="text"></input>

                    </div>
                    <button ng-click="op.operations.push({})">Add one more</button>
                </div>
            </div>

You can also include an index for each operation pushed to the operations list and filter using ng-if:

<div class="panel-body" ng-repeat="op in operation track by $index">
    <p>{{op.title}} | {{op.duration}} | {{op.status}}</p>
    <input ng-model="operation.detailText" type="text"></input>
    <div>
        <div ng-repeat="operation in operations track by $index" ng-if="operation._index === $index">

            <input ng-model="operation.detailText" type="text"></input>

        </div>
        <button ng-click="addOperation($index)">Add one more</button>
    </div>
</div>

angular.module('ionicApp',[])

.controller('mainCtrl', function($scope) {
    $scope.operations = [];

    $scope.operation = [{
      title    : 'Operación 170794',
      duration : '3600',
      status   : '0'
    }, {
      title    : 'Operación 981922',
      duration : '60',
      status   : '0'
    }];

    $scope.addOperation = function(index){
        $scope.operations.push({
            _index: index
        });
    };
});

Answer 5

Answer №3

By incorporating an array into each 'operation' object, you can iterate through them individually as illustrated:

Doing this ensures that the forms and inputs remain distinct from one another.

http://example.com/example-link

Answer 6

By incorporating an array into each 'operation' object, you can iterate through them individually as illustrated:

Doing this ensures that the forms and inputs remain distinct from one another.

http://example.com/example-link

Steer clear of replicating angular elements in the ng-model aspect

Answer №1

Answer №2

Answer №3

Similar questions

The Angular UI Router is rendered ineffective because of the issues with the factory and resource

Dealing with CORS error when making requests to Firebase Realtime Database API within a Vue project

The Bootstrap modal stubbornly refuses to close even after resetting the HTML body

Angular scope object fails to be updated

Swapping out image sources using a React Hook that includes an onClick event

Stop the print dialog box from causing the page to refresh

The creation of a MozillaBrowserBot object has encountered an error

Invoking a parent method in ReactJS through two layers of components using TypeScript

Learn the steps to modify or remove table information from a database using a webpage

Node.js project that was once functional is now encountering issues with the error message: "Error: Route.post() requires a callback function but received [object Undefined]."

Improving the display of events with fullcalendar using ajax requests

How can I prevent anchors from performing any action when clicked in React?

Utilizing React Recharts to create personalized tooltips

Verifying Function Calls in Angular Unit Testing: Handling Cleared $scope Elements

The Node.js Express Server runs perfectly on my own machine, but encounters issues when deployed to another server

Testing the scope of an Angular directive

Error message "e.nodename undefined when set to setTimeout" was encountered

Tips for dynamically changing the class of a form field in jQuery when it is empty

Counting numbers and displaying results using JavaScript with a JSON string

How can I display several custom markers that are constantly updating on a Google map with MySQL and PHP?